vue 如何在循環中 "監聽" 的綁定v-model數據
閱讀目錄
- vue 如何在循環中 "監聽" 的綁定v-model數據
1.普通屬性的值進行監聽
vue中提供了一個watch方法，它用於觀察vue實列上的數據變動，來響應數據的變化。
下面我們來分別學習下使用watch對對象的屬性值進行監聽，有如下幾種，普通屬性的監聽，對象的屬性值的監聽。最后一種就是對input中的v-modle的動態數組的數據屬性進行監聽，最后一種不是使用watch來監聽，本文的重點是最后一種的實現。在項目中會經常碰到使用v-model監聽數據的。
<!DOCTYPE html> <html> <head> <title>演示Vue</title> <style> ul,li {list-style: none;} .list {float: left; width:200px;} button {float:left; margin-top:18px;} </style> </head> <body> <div id="app"> <div style="width:100%;overflow:hidden;"> <input type="text" v-model="count" /> </div> </div> </body> <script src="https://tugenhua0707.github.io/vue/vue-watch/vue.js"></script> <script> var app = new Vue({ el: '#app', data: { count: 1 }, watch: { count(newValue, oldValue) { console.log('新輸入的值為：'+newValue); // 會輸出新值 console.log('原來的值為:'+oldValue); // 會輸出舊值 } } }) </script> </html>
2.監聽對象的變化
如下代碼：
<!DOCTYPE html> <html> <head> <title>演示Vue</title> <style> ul,li {list-style: none;} .list {float: left; width:200px;} button {float:left; margin-top:18px;} </style> </head> <body> <div id="app"> <div style="width:100%;overflow:hidden;"> <input type="text" v-model="tform.count" /> </div> </div> </body> <script src="https://tugenhua0707.github.io/vue/vue-watch/vue.js"></script> <script> var app = new Vue({ el: '#app', data: { tform: { count: 1 } }, watch: { tform: { handler(newValue, oldValue) { // newValue 和 oldValue 是一樣的 console.log(newValue); console.log(oldValue); }, // 深度監聽 監聽對象，數組的變化 deep: true } } }) </script> </html>
3.監聽對象中具體屬性值的變化
如下代碼：
<!DOCTYPE html> <html> <head> <title>演示Vue</title> <style> ul,li {list-style: none;} .list {float: left; width:200px;} button {float:left; margin-top:18px;} </style> </head> <body> <div id="app"> <div style="width:100%;overflow:hidden;"> <input type="text" v-model="tform.count" /> </div> </div> </body> <script src="https://tugenhua0707.github.io/vue/vue-watch/vue.js"></script> <script> var app = new Vue({ el: '#app', data: { tform: { count: '' } }, watch: { 'tform.count': { handler(newValue, oldValue) { console.log('變動之前的值:' + oldValue); console.log('變動后的值：'+ newValue); }, // 深度監聽 監聽對象，數組的變化 deep: true } } }) </script> </html>
3.2 第二種方法 可以借助 computed 如下代碼：
<!DOCTYPE html> <html> <head> <title>演示Vue</title> <style> ul,li {list-style: none;} .list {float: left; width:200px;} button {float:left; margin-top:18px;} </style> </head> <body> <div id="app"> <div style="width:100%;overflow:hidden;"> <input type="text" v-model="tform.count" /> </div> </div> </body> <script src="https://tugenhua0707.github.io/vue/vue-watch/vue.js"></script> <script> var app = new Vue({ el: '#app', data: { tform: { count: '' } }, computed: { newNum: function() { return this.tform.count; } }, watch: { newNum: { handler(newVal, oldVal) { console.log('新值:' +newVal); console.log('原來的值:' +oldVal); }, deep: true } } }) </script> </html>
4.vue 如何在循環中 "監聽" 的綁定v-model數據
現在有這么一個需求，頁面上有多項輸入框，但是具體有多少項，我也不知道，它是通過"新增一項"按鈕點擊事件，點擊一下，就新增一項；如下圖這個樣子；
代碼如下：
<ul class="list"> <li> <label>第1項</label> <input type="text" v-model="item1" /> </li> <li> <label>第2項</label> <input type="text" v-model="item2" /> </li> </ul>
我希望的是，如上代碼 v-model="item1", item2, 依次類推 ... item(n);
然后會對input的輸入框值進行監聽，比如有這么一個需求，如果輸入框的值小於0的話，讓input輸入框自動變為0，也就是說輸入框最小值為0，且為數字。
如果上面的 item1 和 item2 只有兩項的話，那么我們可以使用watch來監聽 item1 和 item2屬性，但是如果頁面上有多項的話，這樣就不好使用watch來監聽數據了。所以我們可以換一種方式來監聽，使用input事件來監聽輸入框值的變化了。如下代碼：
<!DOCTYPE html> <html> <head> <title>演示Vue</title> <style> ul,li {list-style: none;} .list {float: left; width:200px;} button {float:left; margin-top:18px;} </style> </head> <body> <div id="app"> <div style="width:100%;overflow:hidden;"> <ul class="list"> <li v-for="(item, index) in arrs"> <label>第{{index+1}}項</label> <input type="number" v-model="item.customItem" @input="changeFunc(item, index)"/> </li> </ul> <button @click="newadd">新增一項</button> </div> </div> </body> <script src="https://tugenhua0707.github.io/vue/vue-watch/vue.js"></script> <script> var app = new Vue({ el: '#app', data: { count: 1, arrs: [{'value': 1, 'customItem': ''}] }, methods: { newadd() { this.count++; this.arrs.push({'customItem': '', 'value': this.count}); }, changeFunc(item, index) { this.arrs[index].customItem = item.customItem; this.watchVal(); }, // 監聽值的變化 watchVal() { const arrs = this.arrs; if (arrs.length > 0) { for (let i = 0; i < arrs.length; i++) { let customItem = arrs[i].customItem; if (customItem * 1 < 0) { this.$set(this.arrs[i], 'customItem', 0); } } } } } }) </script> </html>