在vue里面，我們操作最多的就是各種數(shù)據(jù)，在jquery里面，我們習(xí)慣通過下標(biāo)定向找到數(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:"點(diǎn)我", listData:["a","b","c"] }, methods:{ changeData () { this.listData[0]="d"; } } })</script></html>當(dāng)我點(diǎn)擊按鈕時(shí)候，發(fā)現(xiàn)沒有任何變化，頁(yè)面上還是a,b,c
vue當(dāng)然不會(huì)這么菜呢
下面是偉大的vue內(nèi)置的方法來(lái)了
Vue.set() 官方解釋： 設(shè)置對(duì)象的屬性。如果對(duì)象是響應(yīng)式的，確保屬性被創(chuàng)建后也是響應(yīng)式的，同時(shí)觸發(fā)視圖更新。這個(gè)方法主要用于避開 Vue 不能檢測(cè)屬性被添加的限制。
我的理解就是觸發(fā)視圖重新更新一遍，數(shù)據(jù)動(dòng)態(tài)起來(lái)
Vue.set(a,b,c)
a是要更改的數(shù)據(jù) b是數(shù)據(jù)的第幾項(xiàng) 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:"點(diǎn)我", listData:["a","b","c"] }, methods:{ changeData () { Vue.set(this.listData,0,'X') } } })</script></html>我們可以看到，this.listData數(shù)組的第一項(xiàng)已經(jīng)被更改了
總結(jié)
以上所述是小編給大家介紹的Vue.set()實(shí)現(xiàn)數(shù)據(jù)動(dòng)態(tài)響應(yīng)的方法，希望對(duì)大家有所幫助，如果大家有任何疑問請(qǐng)給我留言，小編會(huì)及時(shí)回復(fù)大家的。在此也非常感謝大家對(duì)武林網(wǎng)網(wǎng)站的支持！
新聞熱點(diǎn)
疑難解答
圖片精選
網(wǎng)友關(guān)注
