Maison > Article > interface Web > Comment traiter les données dynamiques dans la liste de boucles vue (code)
Comment traiter les données dynamiques dans la liste de boucles vue (code)
- 不言original
- 2018-09-20 16:47:023191parcourir
Le contenu de cet article concerne la méthode de traitement (code) des données dynamiques dans la liste de boucles Vue. Il a une certaine valeur de référence. Les amis dans le besoin peuvent s'y référer.
Méthode d'appel : Vue.set( target, key, value)
target : la source de données à modifier (peut être un objet ou un tableau)
clé : Les données spécifiques à modifier
valeur : la valeur réaffectée
<!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>Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!
Déclaration：
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn