實(shí)例分析vue循環(huán)列表動(dòng)態(tài)數(shù)據(jù)的處理方法

更新時(shí)間：2018年09月28日 15:07:52 投稿：laozhang

本篇文章給大家詳細(xì)分享了關(guān)于vue循環(huán)列表動(dòng)態(tài)數(shù)據(jù)的處理方法以及相關(guān)知識(shí)點(diǎn)內(nèi)容，有需要的朋友們參考下。

調(diào)用方法：Vue.set( target, key, value )

target：要更改的數(shù)據(jù)源(可以是對(duì)象或者數(shù)組)

key：要更改的具體數(shù)據(jù)

value ：重新賦的值

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title></title>
</head>
<body>
<div id="app">
  <p v-for="(item,index)in list" :key="item.id" @click="btnClick(index,item.id)">
    {{item.message}}
  </p>
</div>
<script src="../../dist/vue.min.js"></script>
<script>
  var vm2=new Vue({
    el:"#app",
    data:{
      list:[
        {message:"星星",id:"1"},
        {message:"太陽(yáng)",id:"2"},
        {message:"月亮",id:"3"}
      ]
    },
    methods:{
      btnClick(index,id){
        this.$set(this.list,index,{message:"小貓",id:id});
      }
    }
  });
</script>
</body>
</html>

以上就是本次給大家介紹的相關(guān)vue循環(huán)列表動(dòng)態(tài)數(shù)據(jù)的處理方法的全部?jī)?nèi)容，感謝大家對(duì)腳本之家的支持。

您可能感興趣的文章:

相關(guān)文章

vue3的內(nèi)置組件匯總
本文主要介紹了vue3的內(nèi)置組件匯總,詳細(xì)的介紹了Fragment,Teleport,Suspense三個(gè)組件的使用,具有一定的參考價(jià)值,感興趣的可以了解一下
2024-01-01
vue實(shí)戰(zhàn)中的一些實(shí)用小魔法匯總
這篇文章主要給大家介紹了關(guān)于vue實(shí)戰(zhàn)中一些實(shí)用小魔法的相關(guān)資料,這些技巧和竅門,可以幫助你成為更好的Vue開發(fā)人員,需要的朋友可以參考下
2021-06-06
Vue中 key keep-alive的實(shí)現(xiàn)原理
這篇文章主要介紹了Vue中 key keep-alive的實(shí)現(xiàn)原理,小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧
2018-09-09
vue實(shí)現(xiàn)圖片裁剪后上傳
這篇文章主要為大家詳細(xì)介紹了vue實(shí)現(xiàn)圖片裁剪后上傳，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
2020-12-12
Vue數(shù)據(jù)雙向綁定的實(shí)現(xiàn)方式講解
Vue數(shù)據(jù)雙向綁定原理：Vue內(nèi)部通過(guò)Object.defineProperty方法屬性攔截的方式，把data對(duì)象里每個(gè)數(shù)據(jù)的讀寫轉(zhuǎn)化成getter/setter，當(dāng)數(shù)據(jù)變化時(shí)通知視圖更新
2022-08-08
vue+vux實(shí)現(xiàn)移動(dòng)端文件上傳樣式
這篇文章主要介紹了vue+vux實(shí)現(xiàn)移動(dòng)端文件上傳樣式,樣式使用的是vux的cell組件，需要的朋友可以參考下
2017-07-07
Vue-cli3 $ is not defined錯(cuò)誤問題及解決
這篇文章主要介紹了Vue-cli3 $ is not defined錯(cuò)誤問題及解決,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教
2024-07-07
vue實(shí)現(xiàn)時(shí)間倒計(jì)時(shí)功能
這篇文章主要為大家詳細(xì)介紹了vue實(shí)現(xiàn)時(shí)間倒計(jì)時(shí)功能，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
2021-08-08
Vue實(shí)現(xiàn)選項(xiàng)卡tab切換制作
這篇文章主要為大家詳細(xì)介紹了Vue實(shí)現(xiàn)選項(xiàng)卡tab切換制作，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
2022-03-03
通過(guò)fastclick源碼分析徹底解決tap“點(diǎn)透”
這篇文章主要介紹了通過(guò)fastclick源碼分析徹底解決tap“點(diǎn)透”問題的知識(shí)內(nèi)容，有興趣的朋友學(xué)習(xí)一下吧。
2017-12-12