v-model.lazy詳解

本文轉載自查看原文 2020-04-02 00:37 1503 vue

看下面一段代碼

 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>

查看運行效果

當改變輸入框的值時，span中的值是不會變化的（注意光標還在輸入框內）

而當輸入框失去焦點時，span中的值才會改變（注意光標不在輸入框內）

免責聲明！

本站轉載的文章為個人學習借鑒使用，本站對版權不負任何法律責任。如果侵犯了您的隱私權益，請聯系本站郵箱yoyou2525@163.com刪除。

猜您在找 v-bind和v-model詳解 vue中v-model動態生成的實例詳解 Vue 進階教程之：詳解 v-model Spring的lazy-init詳解 Spring的lazy-init詳解 vue——圖片懶加載v-lazy vue圖片懶加載v-lazy v-model與:model區別 v-model的實現 select 和v-model