您好,登錄后才能下訂單哦!
這篇文章將為大家詳細(xì)講解有關(guān)vue.js如何實(shí)現(xiàn)數(shù)據(jù)動(dòng)態(tài)響應(yīng),小編覺得挺實(shí)用的,因此分享給大家做個(gè)參考,希望大家閱讀完這篇文章后可以有所收獲。
Vue是一款友好的、多用途且高性能的JavaScript框架,使用vue可以創(chuàng)建可維護(hù)性和可測試性更強(qiáng)的代碼庫,Vue允許可以將一個(gè)網(wǎng)頁分割成可復(fù)用的組件,每個(gè)組件都包含屬于自己的HTML、CSS、JavaScript,以用來渲染網(wǎng)頁中相應(yīng)的地方,所以越來越多的前端開發(fā)者使用vue。
代碼如下
<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)沒有任何變化,頁面上還是a,b,c
vue當(dāng)然不會(huì)這么菜呢
下面是偉大的vue內(nèi)置的方法來了
Vue.set()
官方解釋
設(shè)置對象的屬性。如果對象是響應(yīng)式的,確保屬性被創(chuàng)建后也是響應(yīng)式的,同時(shí)觸發(fā)視圖更新。這個(gè)方法主要用于避開 Vue 不能檢測屬性被添加的限制。
我的理解就是觸發(fā)視圖重新更新一遍,數(shù)據(jù)動(dòng)態(tà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>
效果圖:
點(diǎn)擊后,我們可以看到,this.listData數(shù)組的第一項(xiàng)已經(jīng)被更改了
X
關(guān)于“vue.js如何實(shí)現(xiàn)數(shù)據(jù)動(dòng)態(tài)響應(yīng)”這篇文章就分享到這里了,希望以上內(nèi)容可以對大家有一定的幫助,使各位可以學(xué)到更多知識(shí),如果覺得文章不錯(cuò),請把它分享出去讓更多的人看到。
免責(zé)聲明:本站發(fā)布的內(nèi)容(圖片、視頻和文字)以原創(chuàng)、轉(zhuǎn)載和分享為主,文章觀點(diǎn)不代表本網(wǎng)站立場,如果涉及侵權(quán)請聯(lián)系站長郵箱:is@yisu.com進(jìn)行舉報(bào),并提供相關(guān)證據(jù),一經(jīng)查實(shí),將立刻刪除涉嫌侵權(quán)內(nèi)容。