快捷導(dǎo)航

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

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

這篇文章主要介紹了vue.js實(shí)現(xiàn)數(shù)據(jù)動態(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)擊按鈕時候，發(fā)現(xiàn)沒有任何變化，頁面上還是a,b,c

vue當(dāng)然不會這么菜呢

下面是偉大的vue內(nèi)置的方法來了

Vue.set()

官方解釋

設(shè)置對象的屬性。如果對象是響應(yīng)式的，確保屬性被創(chuàng)建后也是響應(yīng)式的，同時觸發(fā)視圖更新。這個方法主要用于避開 Vue 不能檢測屬性被添加的限制。

我的理解就是觸發(fā)視圖重新更新一遍，數(shù)據(jù)動態(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)容，希望對大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。

您可能感興趣的文章:

相關(guān)文章

element-ui點(diǎn)擊查看大圖的方法示例
這篇文章主要介紹了element-ui查看大圖的方法示例，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧
2020-12-12
Nuxt引入vue-persistedstate以及踩坑記錄
這篇文章主要介紹了Nuxt引入vue-persistedstate以及踩坑記錄,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教
2023-10-10
vue中process.env的具體使用
本文主要介紹了vue中process.env的具體使用，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧
2023-03-03
Vue通過URL傳參如何控制全局console.log的開關(guān)詳解
這篇文章主要給大家介紹了關(guān)于Vue根據(jù)URL傳參如何控制全局console.log開關(guān)的相關(guān)資料，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面來一起看看吧。
2017-12-12
vue實(shí)現(xiàn)經(jīng)典選項(xiàng)卡功能
這篇文章主要為大家詳細(xì)介紹了vue實(shí)現(xiàn)經(jīng)典選項(xiàng)卡功能，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價值，感興趣的小伙伴們可以參考一下
2022-03-03
Vue中的動態(tài)路由匹配路由問題
這篇文章主要介紹了Vue中的動態(tài)路由匹配路由問題，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教
2022-12-12
在vue.config.js中優(yōu)化webpack配置的方法
在日常開發(fā)中我們離不開打包工具webpack,但是不同的配置會影響我們項(xiàng)目的運(yùn)行構(gòu)建時間,也會影響打包之后項(xiàng)目包的大小,這篇文章記錄一下我使用過的可以優(yōu)化webpack的配置,需要的朋友可以參考下
2024-05-05
Vue動態(tài)構(gòu)建混合數(shù)據(jù)Treeselect選擇樹及巨樹問題的解決
這篇文章主要介紹了Vue動態(tài)構(gòu)建混合數(shù)據(jù)Treeselect選擇樹及巨樹問題的解決方案，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教
2022-07-07
keep-Alive搭配vue-router實(shí)現(xiàn)緩存頁面效果的示例代碼
這篇文章主要介紹了keep-Alive搭配vue-router實(shí)現(xiàn)緩存頁面效果,本文通過實(shí)例代碼給大家介紹的非常詳細(xì)，對大家的學(xué)習(xí)或工作具有一定的參考借鑒價值，需要的朋友可以參考下
2020-06-06
vue3模塊創(chuàng)建runtime-dom源碼解析
這篇文章主要為大家介紹了vue3模塊創(chuàng)建runtime-dom源碼解析，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪
2023-01-01