快捷導(dǎo)航

Vue.set()實(shí)現(xiàn)數(shù)據(jù)動(dòng)態(tài)響應(yīng)的方法

更新時(shí)間：2018年02月07日 11:49:00 作者：不負(fù)好時(shí)光

這篇文章主要介紹了Vue.set()實(shí)現(xiàn)數(shù)據(jù)動(dòng)態(tài)響應(yīng)的相關(guān)知識，非常不錯(cuò)，具有參考借鑒價(jià)值,需要的朋友可以參考下

在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è)置對象的屬性。如果對象是響應(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)" 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)被更改了

輸入圖片說明