您好,登錄后才能下訂單哦!
在vue里面,我們操作最多的就是各種數(shù)據,在jquery里面,我們習慣通過下標定向找到數(shù)據,然后重新賦值
比如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內置的方法來了
Vue.set() 官方解釋: 設置對象的屬性。如果對象是響應式的,確保屬性被創(chuàng)建后也是響應式的,同時觸發(fā)視圖更新。這個方法主要用于避開 Vue 不能檢測屬性被添加的限制。
我的理解就是觸發(fā)視圖重新更新一遍,數(shù)據動態(tài)起來
Vue.set(a,b,c)
a是要更改的數(shù)據 b是數(shù)據的第幾項 c是更改后的數(shù)據
解決上面數(shù)據不能更改后的代碼
<!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ù)組的第一項已經被更改了
總結
以上所述是小編給大家介紹的Vue.set()實現(xiàn)數(shù)據動態(tài)響應的方法,希望對大家有所幫助,如果大家有任何疑問請給我留言,小編會及時回復大家的。在此也非常感謝大家對億速云網站的支持!
免責聲明:本站發(fā)布的內容(圖片、視頻和文字)以原創(chuàng)、轉載和分享為主,文章觀點不代表本網站立場,如果涉及侵權請聯(lián)系站長郵箱:is@yisu.com進行舉報,并提供相關證據,一經查實,將立刻刪除涉嫌侵權內容。