recherche

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:023257parcourir

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
Article précédent：Comparaison des tests de performances des méthodes de déduplication de tableau jsArticle suivant：Comparaison des tests de performances des méthodes de déduplication de tableau js

Articles Liés

Voir plus