實例分析vue循環(huán)列表動態(tài)數(shù)據(jù)的處理方法
更新時間：2018年09月28日 15:07:52 投稿：laozhang
本篇文章給大家詳細(xì)分享了關(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)文章
基于Vue自定義指令實現(xiàn)按鈕級權(quán)限控制思路詳解
這篇文章主要介紹了基于vue自定義指令實現(xiàn)按鈕級權(quán)限控制,本文給大家介紹的非常詳細(xì)，感興趣的朋友跟隨腳本之家小編一起學(xué)習(xí)吧2018-05-05
這篇文章主要介紹了Vue如何解決兄弟組件之間傳值問題，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-09-09
VUE element-ui 寫個復(fù)用Table組件的示例代碼
本篇文章主要介紹了VUE element-ui 寫個復(fù)用Table組件的示例代碼，具有一定的參考價值，感興趣的小伙伴們可以參考一下2017-11-11
這篇文章主要介紹了vscode自定義vue模板的實現(xiàn)，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2021-01-01
這篇文章主要介紹了詳解vuex的簡單使用,小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2018-03-03
這篇文章主要介紹了vue移動端下拉刷新和上拉加載的實現(xiàn)代碼，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2018-09-09
這篇文章主要介紹了vue插值表達(dá)式和v-text指令的區(qū)別，{{}}這種語法叫做插值表達(dá)式，在插值表達(dá)式中可以寫任何合法的js表達(dá)式，下面來看看文章是怎么介紹該內(nèi)容的吧,需要的朋友可以參考一下2021-11-11
elementUI中的$confirm調(diào)換兩個按鈕位置的實例代碼
這篇文章主要介紹了elementUI中的$confirm調(diào)換兩個按鈕位置的實例代碼,本文通過實例代碼給大家介紹的非常詳細(xì),感興趣的朋友跟隨小編一起看看吧2024-03-03
Vue.js組件使用props傳遞數(shù)據(jù)的方法
這篇文章主要為大家詳細(xì)介紹了Vue.js組件使用props傳遞數(shù)據(jù)的方法，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價值，感興趣的小伙伴們可以參考一下2019-10-10
這篇文章主要介紹了ESLint 是如何檢查 .vue 文件的，幫助大家更好的理解和使用ESLINT，感興趣的朋友可以了解下2020-11-11