v-model修饰符

最新推荐文章于 2024-04-19 16:50:00 发布

Issssy

最新推荐文章于 2024-04-19 16:50:00 发布

阅读量332

点赞数

文章标签： javascript vue.js 开发语言

本文链接：https://blog.csdn.net/Issssy/article/details/128034157

版权

1. .lazy

对于文本输入框，默认情况下，v-model 推指令在每次 input 事件触发后，都会对文本输入框的值与数据进行同步。通过添加.lazy 修饰符，可以将上述行为改为在 change 事件触发之后进行同步，这样就只有在文本框失去焦点后才会改变对应的模型属性的值，因此称为“惰性”绑定。

<body>
    <div id="app">
        <!-- 事件修饰符.lazy(懒惰) 不会即时的将输入框的内容存放入data -->
        <input v-model.lazy="msg">
        <span>{{ msg }}</span>
    </div>

    <script src="../vue.js"></script>

    <script>
        new Vue({
            el:'#app',
            data:{
                msg:'111'
            }
        })
    </script>
</body>

2. .number

如果希望用户输入的值能够自动转换为数值类型，那么可以给v-model指令添加.number修饰符

<body>
    <div id="app">
        <!-- 修饰符.number 吧string字符串转为number数字 -->
        <input type="number" v-model="age">
        <span>{{ age }}</span>
    </div>

    <script src="../vue.js"></script>

    <script>
        new Vue({
            el:'#app',
            data:{
                age:''
            },
            watch:{
                age(){
                    console.log(typeof(this.age));
                }
            }
        })
    </script>
</body>

3. .trim

如果要自动过滤用户输入的首位空白字符，可以给v-model指令添加.tirm修饰符

<body>
    <div id="app">
        <input type="text" v-model.trim="msg">
        <span>一个{{ msg.length }}个字符</span>
    </div>

    <script src="../vue.js"></script>

    <script>
        new Vue({
            el:'#app',
            data:{
                msg:''
            }
        })
    </script>
</body>

Issssy

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
v-model修饰符

对于文本输入框，默认情况下，v-model 推指令在每次 input 事件触发后，都会对文本输入框的值与数据进行同步。通过添加.lazy 修饰符，可以将上述行为改为在 change 事件触发之后进行同步，这样就只有在文本框失去焦点后才会改变对应的模型属性的值，因此称为“惰性”绑定。如果希望用户输入的值能够自动转换为数值类型，那么可以给v-model指令添加.number修饰符。如果要自动过滤用户输入的首位空白字符，可以给v-model指令添加.tirm修饰符。
复制链接

扫一扫