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

作者: ChangLau | 来源:发表于2018-08-22 15:17 被阅读5次

通过使用v-model指令绑定到input textarea checkbox radio实现双向绑定

表单输入修饰符

修饰符	作用
.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>