vue2

lazy

<div class="lazy">
        <h6>lazy: {{lazy}}</h6>
        <input type="text" v-model.lazy="lazy">
 </div>

使用lazy修饰符实现懒加载，调用的是change 事件，而不是input事件

number

使用number修饰符将用户的输入转为数值类型，转换的方法参考parseFloat() ，当输入的内容无法用parseFloat解析时，会返回原始字符串的值

    <div class="num">
        <h6>number: {{num}}</h6>
        <h6>能否被parseFloat()解析: {{parseFloat(num)}}</h6>
        <h6>数据类型: {{typeof(num)}}</h6>
        <input type="text" v-model.number="num">
    </div>

trim

使用trim修饰符将输入前后的空格删除

vue3

在vue3中可以自定义修饰符

封装一个提取数字的修饰符组件

使用方法

效果：

实现原理和v-model双向数据绑定类似，不过在添加了修饰符之后会传递一个参数变量名Modifiers/modelModifiers，以此来判定是否添加了修饰符