Vue.set()實現(xiàn)數(shù)據(jù)動態(tài)響應的方法
在vue里面，我們操作最多的就是各種數(shù)據(jù)，在jquery里面，我們習慣通過下標定向找到數(shù)據(jù)，然后重新賦值
比如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>
當我點擊按鈕時候，發(fā)現(xiàn)沒有任何變化，頁面上還是a,b,c
vue當然不會這么菜呢
下面是偉大的vue內(nèi)置的方法來了
Vue.set() 官方解釋： 設置對象的屬性。如果對象是響應式的，確保屬性被創(chuàng)建后也是響應式的，同時觸發(fā)視圖更新。這個方法主要用于避開 Vue 不能檢測屬性被添加的限制。
我的理解就是觸發(fā)視圖重新更新一遍，數(shù)據(jù)動態(tài)起來
Vue.set(a,b,c)
a是要更改的數(shù)據(jù) b是數(shù)據(jù)的第幾項 c是更改后的數(shù)據(jù)
解決上面數(shù)據(jù)不能更改后的代碼
<!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數(shù)組的第一項已經(jīng)被更改了
總結(jié)
以上所述是小編給大家介紹的Vue.set()實現(xiàn)數(shù)據(jù)動態(tài)響應的方法，希望對大家有所幫助，如果大家有任何疑問請給我留言，小編會及時回復大家的。在此也非常感謝大家對腳本之家網(wǎng)站的支持！
相關文章
Vue-resource攔截器判斷token失效跳轉(zhuǎn)的實例
下面小編就為大家?guī)硪黄猇ue-resource攔截器判斷token失效跳轉(zhuǎn)的實例。小編覺得挺不錯的，現(xiàn)在就分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2017-10-10
這篇文章主要介紹了vue路由守衛(wèi)+登錄態(tài)管理,結(jié)合實例形式分析了vue路由守衛(wèi)與登錄態(tài)管理相關操作步驟與實現(xiàn)技巧,需要的朋友可以參考下2019-05-05
windows下vue-cli及webpack搭建安裝環(huán)境
這篇文章主要介紹了windows下vue-cli及webpack搭建安裝環(huán)境，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2017-04-04
vue中循環(huán)多個li(表格)并獲取對應的ref的操作代碼
我想要獲取每一個循環(huán)并獲取每一個li(或者其它循環(huán)項)的ref,以便于后續(xù)的操作,接下來通過本文給大家分享vue中循環(huán)多個li(表格)并獲取對應的ref的操作代碼,感興趣的朋友跟隨小編一起看看吧2024-02-02
在 Vue 中,watch 屬性用于觀察和響應 Vue 實例上數(shù)據(jù)的變動,然而,默認情況下,watch 確實不會觸發(fā)組件創(chuàng)建時的變動,這里有幾種方式可以處理或繞過這個問題,需要的朋友可以參考下2024-09-09
vue打包優(yōu)化時配置webpack的8大方案小結(jié)
vue-cli?生成的項目通常集成Webpack?,在打包的時候,需要webpack來做一些事情,這里我們希望它可以壓縮代碼體積,提高運行效率,本文為大家整理了8大webpack配置方案,希望對大家有所幫助2024-02-02
詳解用webpack2.0構(gòu)建vue2.0超詳細精簡版
本篇文章主要介紹了詳解用webpack2.0構(gòu)建vue2.0超詳細精簡版，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2017-04-04
Spring boot 和Vue開發(fā)中CORS跨域問題解決