v-model的修饰符

最新推荐文章于 2023-12-13 09:02:57 发布

孤385

最新推荐文章于 2023-12-13 09:02:57 发布

阅读量233

点赞数

文章标签： vue.js javascript 前端

本文链接：https://blog.csdn.net/weixin_66598693/article/details/128063446

版权

v-model的修饰符有哪些？

v-model.lazy：值修改操作完成之后才会发生变化。
v-model.number：值修改时，保持其值为Number类型。
v-model.trim：剔除输入框内内容的空格，使其输入符合规则。

<body>
    <div id="app">
        <!-- 1.修饰符：lazy -->
        <input type="text" v-model='message'>只要改变就会同步
        <br>
        <input type="text" v-model.lazy='message'>敲了回车（或失去焦点）才改变
        <h2>{{message}}</h2>

        <hr>
        <!-- 2.修饰符：number -->
        <input type="number" v-model='age'>只要修改了，就变成了string类型
        <br>
        <input type="number" v-model.number='age'> 依旧是number类型
        <h2>{{age}}--{{typeof age}}</h2>
        
        <hr>
        <!-- 3.修饰符：trim -->
        <input type="text" v-model.trim='name'>在控制台打印 app.name 若有空格，则会显示
        <h2>您输入的名字：{{name}}</h2>
    </div>
    <script src="../JS/vue.js"></script>
    <script>
        const app = new Vue({
            el:'#app',
            data:{
                message:'你好！',
                age : 0,
                name:'先打空格在写内容'
            }
        })
    </script>
</body>