vue.js實(shí)現(xiàn)數(shù)據(jù)動(dòng)態(tài)響應(yīng) Vue.set的簡單應(yīng)用
在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)沒有任何變化，頁面上還是a,b,c
vue當(dāng)然不會(huì)這么菜呢
下面是偉大的vue內(nèi)置的方法來了
Vue.set()
官方解釋
設(shè)置對(duì)象的屬性。如果對(duì)象是響應(yīng)式的，確保屬性被創(chuàng)建后也是響應(yīng)式的，同時(shí)觸發(fā)視圖更新。這個(gè)方法主要用于避開 Vue 不能檢測(cè)屬性被添加的限制。
我的理解就是觸發(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>
我們可以看到，this.listData數(shù)組的第一項(xiàng)已經(jīng)被更改了
X
以上就是本文的全部內(nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。
- Vue.set() this.$set()引發(fā)的視圖更新思考及注意事項(xiàng)
- Vue之Vue.set動(dòng)態(tài)新增對(duì)象屬性方法
- 從vue源碼解析Vue.set()和this.$set()
- Vue.set()動(dòng)態(tài)的新增與修改數(shù)據(jù),觸發(fā)視圖更新的方法
- Vue.set()實(shí)現(xiàn)數(shù)據(jù)動(dòng)態(tài)響應(yīng)的方法
- 詳解VUE 定義全局變量的幾種實(shí)現(xiàn)方式
- Vue中定義全局變量與常量的各種方式詳解
- 詳解Vue.use自定義自己的全局組件
- vue定義全局變量和全局方法的方法示例
- Vue.set 全局操作簡單示例
相關(guān)文章
Vue表格首列相同數(shù)據(jù)合并實(shí)現(xiàn)方法
這篇文章主要介紹了Vue實(shí)現(xiàn)表格首列相同數(shù)據(jù)合并的方法，本文通過實(shí)例代碼給大家介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值,需要的朋友可以參考下2023-04-04
Vue3項(xiàng)目的3種創(chuàng)建方式代碼示例
使用VUE3開發(fā)很久了,但一直沒進(jìn)行總結(jié)和記錄,忙里偷閑整理搭建一套VUE3項(xiàng)目,正好記錄一下,這篇文章主要給大家介紹了關(guān)于Vue3項(xiàng)目的3種創(chuàng)建方式,需要的朋友可以參考下2024-03-03
vuex刷新之后數(shù)據(jù)丟失,數(shù)據(jù)持久化,vuex-persistedstate問題
這篇文章主要介紹了vuex刷新之后數(shù)據(jù)丟失,數(shù)據(jù)持久化,vuex-persistedstate問題，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2022-03-03
組件之間通信分為三種：父-子；子-父；跨級(jí)組件通信。下面，就組件間如何通信做一些總結(jié)。需要的朋友可以參考下2018-11-11
本篇文章主要介紹了vue.js組件化開發(fā)實(shí)踐，小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧2016-12-12
Vue移動(dòng)端實(shí)現(xiàn)pdf/excel/圖片在線預(yù)覽
這篇文章主要為大家詳細(xì)介紹了Vue移動(dòng)端實(shí)現(xiàn)pdf/excel/圖片在線預(yù)覽功能的相關(guān)方法,文中的示例代碼講解詳細(xì),有需要的小伙伴可以參考下2024-04-04
vue-cli+webpack在生成的項(xiàng)目中使用bootstrap實(shí)例代碼
本篇文章主要介紹了vue-cli+webpack在生成的項(xiàng)目中使用bootstrap實(shí)例代碼，具有一定的參考價(jià)值，有興趣的可以了解一下2017-05-05
vue+springboot前后端分離實(shí)現(xiàn)單點(diǎn)登錄跨域問題解決方法
這篇文章主要介紹了vue+springboot前后端分離實(shí)現(xiàn)單點(diǎn)登錄跨域問題的解決方法,需要的朋友可以參考下2018-01-01
vue動(dòng)態(tài)添加行/刪除行的完整代碼示例
在開發(fā)中我們常常會(huì)碰到這種業(yè)務(wù),有一些數(shù)據(jù)需要在前端進(jìn)行刪除,這篇文章主要給大家介紹了關(guān)于vue動(dòng)態(tài)添加行/刪除行的相關(guān)資料,需要的朋友可以參考下2024-02-02
vue路由前進(jìn)后退動(dòng)畫效果的實(shí)現(xiàn)代碼
這篇文章主要介紹了vue路由前進(jìn)后退動(dòng)畫效果，本文通過實(shí)例代碼給大家介紹的非常詳細(xì)，具有一定的參考借鑒價(jià)值,需要的朋友可以參考下2018-12-12