vue.set dans vue a plusieurs paramètres-Voir.js-php.cn

vue.set dans vue a plusieurs paramètres

藏色散人

Libérer： 2023-01-13 00:44:57

original

4090 Les gens l'ont consulté

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 ;

vue.set dans vue a plusieurs paramètres

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

Vue.set()

Vue.set( target, key, value )

Copier après la connexion

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>

Copier après la connexion

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;}
}

Copier après la connexion

. 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