v-model的三个修饰符

1、lazy

<input type="text" v-model="name">

相当于

<input type="text" :value="name" @input="(e)=>name=e.target.value">

加上lazy修饰符

<input type="text" v-model.lazy="name">

相当于（将input事件改为change事件）

<input type="text" :value="name" @change="(e)=>name=e.target.value">

change事件在输入时不会改变data中的数据：

它是在失焦时才触发更新

注意：el-input 和 van-field 的v-model加载lazy修饰符没有作用

 

2、number（elementUI和vant只能输入纯数字，并且是数值型）

    <input type="number" v-model.number="age" />
    <p>{{age}} {{typeof age}}</p>

加上number修饰符后，如果输入的是数字那么值类型就一直是数字，如果输入的第一个字符是字符串那么值类型就为字符型了

和type='number'搭配使用，禁止数字外的字符输入就可以一直是数字型

不过设置了type='number'后，输入框会有两个小箭头

这看着多难受，有两种解决办法：

①可以使用 oninput="value=value.replace(/[^\d]/g,'')" 替代 type='number'

<input v-model.number="age" oninput="value=value.replace(/[^\d]/g,'')" />

　　这样可以保证input中输入的是数字型数字！但是不支持小数！

②使用type='number'，设置样式

/deep/ input::-webkit-outer-spin-button,
/deep/ input::-webkit-inner-spin-button {
  -webkit-appearance: none;
}
/deep/ input[type='number'] {
  -moz-appearance: textfield;
}

　　这种情况支持小数！

 

elementUI的el-input加上type='number'也会有这个丑陋的箭头：

设置样式后箭头就没有了，也可以用下面的方式，只不过不支持小数了

el-input v-model.number="num" oninput="value=value.replace(/[^\d]/g,'')" />

如果写成这样 oninput="value=value.replace(/[^\d.]/g,'')" 那么可以输入多个小数点，不符合要求

 

vant的van-field加上type='digit'或type='number'没有丑陋的箭头

以下这两种方式效果一样：

<van-field type="digit" v-model.number="num" label="数字" />

<van-field oninput="value=value.replace(/[^\d]/g,'')" v-model.number="num" label="数字" />

而type='number'支持小数

<van-field type="number" v-model.number="num" label="数字" />

 

总结：

　　1、给v-model添加number修饰符可以过滤掉数字以外的字符

　　2、但是在开头处输入其他字符就又变成string类型了

　　3、可以设置type='number'，禁止数字、小数点（有且只有一个小数点）、负号外的其他字符，但是这种方式会有小箭头，可以通过设置样式去掉这个小箭头

　　4、如果不设置type='number'，可以设置oninput="value=value.replace(/[^\d]/g,'')"，这种方式只支持自然数

3、trim

去除首尾两端的空格，同样适用于elementUI和vant

    <input v-model.trim="name" />
    <p>开头{{name}}结尾</p>

    <el-input v-model.trim="name" />

    <van-field v-model.trim="name" />