vue.js實(shí)現(xiàn)數(shù)據(jù)動(dòng)態(tài)響應(yīng) Vue.set的簡(jiǎn)單應(yīng)用

更新時(shí)間：2017年06月15日 16:44:30 作者：前端交流ing

這篇文章主要介紹了vue.js實(shí)現(xiàn)數(shù)據(jù)動(dòng)態(tài)響應(yīng)，Vue.set的簡(jiǎn)單應(yīng)用，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下

在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)被更改了

以上就是本文的全部?jī)?nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。

您可能感興趣的文章:

相關(guān)文章

Vue表格首列相同數(shù)據(jù)合并實(shí)現(xiàn)方法
這篇文章主要介紹了Vue實(shí)現(xiàn)表格首列相同數(shù)據(jù)合并的方法，本文通過(guò)實(shí)例代碼給大家介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值,需要的朋友可以參考下
2023-04-04
Vue3項(xiàng)目的3種創(chuàng)建方式代碼示例
使用VUE3開(kāi)發(fā)很久了,但一直沒(méi)進(jìn)行總結(jié)和記錄,忙里偷閑整理搭建一套VUE3項(xiàng)目,正好記錄一下,這篇文章主要給大家介紹了關(guān)于Vue3項(xiàng)目的3種創(chuàng)建方式,需要的朋友可以參考下
2024-03-03
vuex刷新之后數(shù)據(jù)丟失,數(shù)據(jù)持久化,vuex-persistedstate問(wèn)題
這篇文章主要介紹了vuex刷新之后數(shù)據(jù)丟失,數(shù)據(jù)持久化,vuex-persistedstate問(wèn)題，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教
2022-03-03
Vue.js組件間通信方式總結(jié)【推薦】
組件之間通信分為三種：父-子；子-父；跨級(jí)組件通信。下面，就組件間如何通信做一些總結(jié)。需要的朋友可以參考下
2018-11-11
詳解vue.js組件化開(kāi)發(fā)實(shí)踐
本篇文章主要介紹了vue.js組件化開(kāi)發(fā)實(shí)踐，小編覺(jué)得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧
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)登錄跨域問(wèn)題解決方法
這篇文章主要介紹了vue+springboot前后端分離實(shí)現(xiàn)單點(diǎn)登錄跨域問(wèn)題的解決方法,需要的朋友可以參考下
2018-01-01
vue動(dòng)態(tài)添加行/刪除行的完整代碼示例
在開(kā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)畫(huà)效果的實(shí)現(xiàn)代碼
這篇文章主要介紹了vue路由前進(jìn)后退動(dòng)畫(huà)效果，本文通過(guò)實(shí)例代碼給大家介紹的非常詳細(xì)，具有一定的參考借鑒價(jià)值,需要的朋友可以參考下
2018-12-12