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