vue.js實現數據動態響應（Vue.set的應用）
阿新 • • 發佈：2017-06-15
屬性 點擊 屬性。 沒有 log utf-8 創建 http for
在vue裏面，我們操作最多的就是各種數據，在jquery裏面，我們習慣通過下標定向找到數據，然後重新賦值
比如var a[0]=111;（希望上家公司原諒菜鳥的我寫了不少這樣的代碼??）
下面上代碼
<html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <script src="./js/vue.min.js"></script> </head> <body> <div id="app"> <ul> <li v-for="item in listData">{{item}}</li> </ul> <a href="javascript:void(0)" v-text="he" @click="changeData()"></a> </div> </body> <script> new Vue({ el:"#app", data:{ he:"點我", listData:["a","b","c"] }, methods:{ changeData () { this.listData[0]="d"; } } }) </script> </html>
當我點擊按鈕時候，發現沒有任何變化，頁面上還是a,b,c
vue當然不會這麽菜呢
下面是偉大的vue內置的方法來了
Vue.set()
官方解釋
設置對象的屬性。如果對象是響應式的，確保屬性被創建後也是響應式的，同時觸發視圖更新。這個方法主要用於避開 Vue 不能檢測屬性被添加的限制。
好長喲，哈哈哈哈??
我的理解就是觸發視圖重新更新一遍，數據動態起來
Vue.set(a,b,c)
a是要更改的數據
b是數據的第幾項
c是更改後的數據
解決上面數據不能更改後的代碼
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <script src="./js/vue.min.js"></script> </head> <body> <div id="app"> <ul> <li v-for="item in listData">{{item}}</li> </ul> <a href="javascript:void(0)" v-text="he" @click="changeData()"></a> </div> </body> <script> new Vue({ el:"#app", data:{ he:"點我", listData:["a","b","c"] }, methods:{ changeData () { Vue.set(this.listData,0,‘X‘) } } }) </script> </html>
我們可以看到，this.listData數組的第一項已經被更改了
X
vue.js實現數據動態響應（Vue.set的應用）