el-input-number(计数器)
input-number的特点是只允许输入数字，如果有max，min设置，用户输入的数字不在这个范围，或者是，我们需要给出用户一条提示信息，告诉用户输入不正确，而
change
事件的触发条件是当输入的数字与其现有的数字不同时，才会触发此条件：
1.
用户输入统一数字不会触发change；
2.
用户输入的时数字，但是超出了范围，input-number会自动处理为最大，会最小值,此时会触发change，但是我们得不到用户输入的错误数据，由此并不能给出相应的错误提示。
3.
用户输入的格式不对，比如中文，英文，input-number会还原为原来的数，不会触发change，
内部自动处理了用户的错误的行为并吞没了该错误信息，但是我们需要根据根据用户的错误信息来进行提示。所以在需要给出错误提示的情况下input-number并不适用。
实验：codeopen input-number
字符串引起来的要想变成不是字符串那就要绑定，不然的话就是字符串处理了，如数字，boolean值需要绑定，而本身是字符串如label,small的描述就不用
<el-input-number
v-model="num"
@change="handleChange"
:min="0"
:max="10"
label="描述文字"
size="small"
:controls="false">
</el-input-number>
el-input（输入框）
为了获取用户输入的第一数据，我们需要的时输入框，在输入框的基础上，添加辅助功能，使其变成针对number的输入框。
1.
input
事件，是当input值改变时，触发该事件，这使得我们能够及时关注用户的输入信息
2.
它的宽度我们可以通过
style:="width: 80px;" 来控制
，或者外置一个容器设置宽度
3.
el-input的内置内容居中：
codeopen实验：el-input输入框显示
/deep/ .el-input__inner{
text-align: center;
}
表达校验单行数据
需求：当用户输入的值不在效范围内，则给出提示，这涉及到校验，校验一般用el-form来进行
实验：jsfiddle必须填写与数字位数校验
1.
el-form
进行表单检验时，1). 必须要传入一个表单对象(对象里面是要检验的数据)
model
，以便在校验规则通过后，消除提示信息 2. 需要制定我们的校验规则对象
rules
；（
在这里我们只是想校验一个数据项，所以以$data来作为数据对象
）
2.
prop
为选定哪项检验规则来校验的数据
3.
$data
代表的是我们的数据模型
实验：codeopen el-form校验单行数据
<!-- el-form 进行表单检验时，1. 必须要传入一个表单对象，以便在校验规则通过后，消除提示信息 2. 需要制定我们的校验规则对象-->
<el-form :model="$data" :inline="true" :rules="rules2" >
<!-- prop为适用哪项检验规则来校验下面的数据 -->
<el-form-item label="审批人" prop="user">
<!-- 要被是被为校验的数据，需要是在model中绑定的对象中，只有是属于绑定的对象数据的内容跟，才进行校验 -->
<el-input v-model="$data.user" placeholder="审批人"></el-input>
<span>{{user}}</span>
<!-- $data代表的是我们的数据模型 -->
<span>{{$data}}</span>
</el-form-item>
</el-form>
//------------一个校验规则下的多重校验---------------
data() {
return {
user: '',
rules2: {
checkUser:[
{
required: true,
message: '测试数字',
trigger: 'blur'
},
{
pattern: /^\d{18}$/,
message: '请输入18位纯数字',
trigger: 'blur'
}
]
}
}
}
正则表达式校验
{
// 1到7位整数校验
pattern: /^[0-9]\d{0,6}$/,
message: '请输入1到7位的整数'
}