在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)" rel="external nofollow" rel="external nofollow" 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)" rel="external nofollow" rel="external nofollow" 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數組的第一項已經被更改了
總結
以上所述是小編給大家介紹的Vue.set()實現數據動態響應的方法，希望對大家有所幫助，如果大家有任何疑問請給我留言，小編會及時回復大家的。在此也非常感謝大家對億速云網站的支持！
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
