vue.set in vue hat mehrere Parameter-View.js-php.cn

vue.set in vue hat mehrere Parameter

藏色散人

Freigeben： 2023-01-13 00:44:57

Original

4040 Leute haben es durchsucht

vue.set in vue hat 3 Parameter, nämlich: 1. Ziel, das die zu ändernde Datenquelle darstellt; 2. Schlüssel, der die zu ändernden spezifischen Daten darstellt; 3. Wert, der den neu zugewiesenen Wert darstellt;

vue.set in vue hat mehrere Parameter

Die Betriebsumgebung dieses Artikels: Windows10-System, Vue2.9, Dell G3-Computer.

Vue.set()

Vue.set( target, key, value )

Nach dem Login kopieren

Parameter:

Ziel: die zu ändernde Datenquelle (kann ein Objekt oder Array sein)
Schlüssel: die spezifischen Daten, die geändert werden sollen
Wert: re Der zugewiesene Wert. Offizielle API: Vue.set () Die btn2Clcick-Methode in Methoden. Zu diesem Zeitpunkt möchte ich „Test eins“ in „Test ändern“ ändern. Das Ergebnis nach der Ausführung: Zu diesem Zeitpunkt wurde „Test eins“ in der ersten Spalte der Liste zu „Test ändern“ geändert
Es gibt eine Situation, vor der ich vorsichtig sein muss:

Nachdem ich mich an das Schreiben von JS gewöhnt habe, möchte ich möglicherweise die Daten in einem bestimmten Index im Array ändern. Ich werde this.items[XX] direkt ändern als:

<!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>

Nach dem Login kopieren

Sehen wir uns das Ergebnis an:

Diese Situation ist ein Hinweis, der in der Vue-Dokumentation klar angegeben ist. Aufgrund von JavaScript-Einschränkungen kann Vue Datenänderungen nicht erkennen, wenn wir die Daten also dynamisch ändern müssen , Vue.set() kann unsere Anforderungen vollständig erfüllen.

Schüler, die genau hinschauen, fragen sich vielleicht: Gibt es nicht einen Knopf? Wofür wird er verwendet? vue.set in vue hat mehrere Parameter

Schauen wir uns direkt an:

vue.set in vue hat mehrere Parameter

Dies sind die anfänglichen Listendaten.

Nach dem Klicken:

vue.set in vue hat mehrere Parameter

Hier ist zu sehen, dass Vue.set() nicht nur geändert werden kann Die Daten, aber auch die Möglichkeit, Daten hinzuzufügen, gleicht die Mängel der Vue-Array-Mutationsmethoden aus

Tipp: Vue.set() kann auch so geschrieben werden.$set() in Methoden