Vue.set()實(shí)現(xiàn)數(shù)據(jù)動(dòng)態(tài)響應(yīng)的方法
在vue里面，我們操作最多的就是各種數(shù)據(jù)，在jquery里面，我們習(xí)慣通過(guò)下標(biāo)定向找到數(shù)據(jù)，然后重新賦值
比如var a[0]=111;（希望上家公司原諒菜鳥(niǎo)的我寫了不少這樣的代碼😁）
下面上代碼
<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)" 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ì)大家有所幫助，如果大家有任何疑問(wèn)請(qǐng)給我留言，小編會(huì)及時(shí)回復(fù)大家的。在此也非常感謝大家對(duì)腳本之家網(wǎng)站的支持！
相關(guān)文章
Vue-resource攔截器判斷token失效跳轉(zhuǎn)的實(shí)例
下面小編就為大家?guī)?lái)一篇Vue-resource攔截器判斷token失效跳轉(zhuǎn)的實(shí)例。小編覺(jué)得挺不錯(cuò)的，現(xiàn)在就分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2017-10-10
vue路由守衛(wèi)+登錄態(tài)管理實(shí)例分析
這篇文章主要介紹了vue路由守衛(wèi)+登錄態(tài)管理,結(jié)合實(shí)例形式分析了vue路由守衛(wèi)與登錄態(tài)管理相關(guān)操作步驟與實(shí)現(xiàn)技巧,需要的朋友可以參考下2019-05-05
windows下vue-cli及webpack搭建安裝環(huán)境
這篇文章主要介紹了windows下vue-cli及webpack搭建安裝環(huán)境，小編覺(jué)得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2017-04-04
vue中循環(huán)多個(gè)li(表格)并獲取對(duì)應(yīng)的ref的操作代碼
我想要獲取每一個(gè)循環(huán)并獲取每一個(gè)li(或者其它循環(huán)項(xiàng))的ref,以便于后續(xù)的操作,接下來(lái)通過(guò)本文給大家分享vue中循環(huán)多個(gè)li(表格)并獲取對(duì)應(yīng)的ref的操作代碼,感興趣的朋友跟隨小編一起看看吧2024-02-02
Vue中watch監(jiān)聽(tīng)首次不生效的解決辦法
在 Vue 中,watch 屬性用于觀察和響應(yīng) Vue 實(shí)例上數(shù)據(jù)的變動(dòng),然而,默認(rèn)情況下,watch 確實(shí)不會(huì)觸發(fā)組件創(chuàng)建時(shí)的變動(dòng),這里有幾種方式可以處理或繞過(guò)這個(gè)問(wèn)題,需要的朋友可以參考下2024-09-09
vue打包優(yōu)化時(shí)配置webpack的8大方案小結(jié)
vue-cli?生成的項(xiàng)目通常集成Webpack?,在打包的時(shí)候,需要webpack來(lái)做一些事情,這里我們希望它可以壓縮代碼體積,提高運(yùn)行效率,本文為大家整理了8大webpack配置方案,希望對(duì)大家有所幫助2024-02-02
詳解用webpack2.0構(gòu)建vue2.0超詳細(xì)精簡(jiǎn)版
本篇文章主要介紹了詳解用webpack2.0構(gòu)建vue2.0超詳細(xì)精簡(jiǎn)版，小編覺(jué)得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2017-04-04
在vue里面設(shè)置全局變量或數(shù)據(jù)的方法
Spring boot 和Vue開(kāi)發(fā)中CORS跨域問(wèn)題解決