Maison >interface Web >Voir.js >vue.set dans vue a plusieurs paramètres

vue.set dans vue a plusieurs paramètres

藏色散人original: 2020-12-15 16:29:054141parcourir

vue.set dans vue a 3 paramètres, à savoir : 1. target, indiquant la source de données à modifier ; 2. key, indiquant les données spécifiques à modifier ; 3. value, indiquant la valeur réaffectée ;

L'environnement d'exploitation de cet article : système Windows10, vue2.9, ordinateur Dell G3.

Vue.set()

Vue.set( target, key, value )

Paramètres :

cible : la source de données à modifier (peut être un objet ou tableau)
clé : les données spécifiques à modifier
valeur : la valeur réaffectée

API officielle : Vue.set()

Utilisation de Vue.set

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title></title>
</head>
<body>
<div id="app2">
    <p v-for="item in items" :key="item.id">
        {{item.message}}
    </p>
    <button @click="btn2Click()">动态赋值</button><br/>    
    <button @click="btn3Click()">为data新增属性</button>
</div>
<script src="../../dist/vue.min.js"></script>
<script>
var vm2=new Vue({
    el:"#app2",
    data:{
        items:[
            {message:"Test one",id:"1"},
            {message:"Test two",id:"2"},
            {message:"Test three",id:"3"}
        ]
    },
    methods:{
        btn2Click:function(){
            Vue.set(this.items,0,{message:"Change Test",id:&#39;10&#39;})
        },
        btn3Click:function(){
            var itemLen=this.items.length;
            Vue.set(this.items,itemLen,{message:"Test add attr",id:itemLen});
        }
    }
});
</script>
</body>
</html>

La page est comme ça en ce moment

vue.set dans vue a plusieurs paramètres

Après avoir cliqué sur le premier bouton, j'exécute la méthode btn2Clcick dans les méthodes. À ce stade, je souhaite changer le Test en Change Test

vue.set dans vue a plusieurs paramètres

<.>Le résultat après exécution : à ce moment-là, le Test dans la première colonne de la liste est devenu Change Test

vue.set dans vue a plusieurs paramètres

Il y a une situation dont il faut se méfier ici :

Lorsque vous vous habituez à écrire du JS, il y a Peut-être que je veux modifier les données dans un certain indice du tableau, je change simplement this.items[XX], tel que :

btn2Click:function(){
  this.items[0]={message:"Change Test",id:&#39;10&#39;}
}

Jetons un coup d'œil au résultat :

vue.set dans vue a plusieurs paramètres

Cette situation est une note clairement indiquée dans la documentation de Vue. En raison des limitations de JavaScript, Vue ne peut pas détecter les changements de données, donc. lorsque nous devons modifier dynamiquement les données, Vue.set() répond parfaitement à nos besoins.

Les étudiants qui regardent attentivement peuvent se demander : n'y a-t-il pas un bouton ?

Regardons directement :

vue.set dans vue a plusieurs paramètres

Ceci sont les données de la liste initiale. Il y a trois objets dans les données

Après avoir cliqué :

vue.set dans vue a plusieurs paramètres On peut voir ici que Vue.set() peut non seulement modifier les données, mais également en ajouter, compensant les lacunes de la méthode de mutation du tableau Vue

Astuce : Vue. set() peut également être écrit sous la forme this.$set()

dans les méthodes Recommandé : "

tutoriel vue

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：La conception des fourmis prend-elle en charge Vue ?Article suivant：La conception des fourmis prend-elle en charge Vue ?

Articles Liés

Voir plus