• 微信公众号:美女很有趣。 工作之余,放松一下,关注即送10G+美女照片!

v-model的三个修饰符

开发技术 开发技术 1周前 (06-11) 10次浏览

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中的数据:

v-model的三个修饰符

它是在失焦时才触发更新

注意: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’后,输入框会有两个小箭头

v-model的三个修饰符

这看着多难受,也可以使用 oninput=”value=value.replace(/[^d]/g,”)” 【推荐】

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

这样可以保证input中输入的是数字型数字!

 

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

v-model的三个修饰符

所以推荐:

el-input v-model.number="num" 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="数字" />

 

3、trim

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

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

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

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

 


程序员灯塔
转载请注明原文链接:v-model的三个修饰符
喜欢 (0)