在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數組的第一項已經被更改了
原文釋出時間為：2018年02月07日
原文作者：
不負好時光本文來源：
開源中國如需轉載請聯系原作者