Vue 表单修饰符.lazy .number .trim的用法和区别

Vue 表单修饰符.lazy .number .trim的用法和区别

表单输入修饰符

修饰符 作用
.lazy lazy 修饰符修改 input 触发为 change 触发
.number number 修饰符可以将返回结果自动转化为 Number 类型,否则就是 String 类型
.trim trim 过滤首尾空格符
        <h4>修饰符lazy</h4>
        <!-- .lazy修饰符修改input触发为change触发 -->
        <input type="text" v-model.lazy="msg_lazy">
        <br>
        <span>{{msg_lazy}}</span>
        <h4>修饰符number</h4>
        <!-- .number修饰符可以将返回结果自动转化为Number类型,否则就是String类型 -->
        <input type="number" v-model.number="msg_number">
        <br>
        <span>{{msg_number}}</span>
        <h4>修饰符trim</h4>
        <!-- .trim过滤首尾空格符 -->
        <input type="text" v-model.trim="msg_trim">
        <br>
        <span>{{msg_trim}}</span>