在vue里面，我們操作最多的就是各種數(shù)據(jù)，在jquery里面，我們習(xí)慣通過(guò)下標(biāo)定向找到數(shù)據(jù)，然后重新賦值
比如var a[0]=111;（希望上家公司原諒菜鳥(niǎo)的我寫(xiě)了不少這樣的代碼）
下面上代碼
<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)沒(méi)有任何變化，頁(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è)方法主要用于避開(kāi) 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)" 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)被更改了
X
以上就是本文的全部?jī)?nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持武林網(wǎng)。
新聞熱點(diǎn)
疑難解答
圖片精選
網(wǎng)友關(guān)注
