v-model.lazy详解

时间：2020-04-02 00:51:35 阅读：328 评论：0 收藏：0 [点我收藏+]

标签：this code 添加 methods mamicode 修饰符 eth app img

看下面一段代码

 1 <div id="app">
 2     <input v-model="msg" @change="show">
 3     <span>{{msg}}</span>
 4 </div>
 5 
 6 <script>
 7     var vm = new Vue({
 8         el: ‘#app‘,
 9         data: {
10             msg: 123
11         },
12         methods: {
13             show () {
14                 console.log(this.msg);
15             }
16         }
17     })
18 </script>

查看运行效果

技术图片

当改变输入框的值时，span中的值是同时变化的（注意光标还在输入框内）

技术图片

如果给v-model添加上.lazy修饰符

 1 <div id="app">
 2     <input v-model.lazy="msg" @change="show">
 3     <span>{{msg}}</span>
 4 </div>
 5 <script>
 6     var vm = new Vue({
 7         el: ‘#app‘,
 8         data: {
 9             msg: 123
10         },
11         methods: {
12             show () {
13                 console.log(this.msg)
14             }
15         }
16     })
17 </script>