Heim > Artikel > Web-Frontend > So verwenden Sie berechnete Eigenschaften in Vue
So verwenden Sie berechnete Eigenschaften in Vue
- 小云云Original
- 2017-12-12 13:07:122135Durchsuche
Berechnete Eigenschaften
Ausdrücke in Vorlagen sind sehr praktisch, werden aber eigentlich nur für einfache Operationen verwendet. Zur Beschreibung der Struktur von Ansichten werden Vorlagen verwendet. Wenn einer Vorlage zu viel Logik hinzugefügt wird, kann sie übergewichtig und schwer zu warten sein. Aus diesem Grund beschränkt Vue.js die Bindung von Ausdrücken auf einen Ausdruck. Wenn die Logik von mehr als einem Ausdruck erforderlich ist, sollten berechnete Eigenschaften verwendet werden. In diesem Artikel werden hauptsächlich die Verwendung von Vue-berechneten Attributen und Methodenbeispielen für Vue-Instanzen vorgestellt. Jetzt werde ich es mit Ihnen teilen und Ihnen eine Referenz geben.
von Vue berechnete Eigenschaften
Wenn wir den Wert einer Eigenschaft basierend auf dem Ausführungsergebnis eines Endes des Geschäftscodes zurückgeben möchten, können wir die berechnete Eigenschaft verwenden ,
Eine berechnete Eigenschaft ist eine Funktion mit einem Ergebnis. Sie verfügt über eine Get-Methode und eine Set-Methode. Die Get-Methode muss einen Rückgabewert haben
<script src="lib/vue.js"></script>
<body>
<p id="box">
a = >{{a}}
b = > {{b}}
</p>
</body>
<script>
var vm = new Vue({
el:'#box',
data:{
a:1
},
computed:{
b:function () {
//业务代码
return this.a+1;
}
}
});
/**这样直接改属性的值不行的，需要调用计算属性的set方法**/
document.onclick = function(){
vm.b = 3;
};
</script> Methoden zum Festlegen/Abrufen berechneter Eigenschaften:
<script src="lib/vue.js"></script>
<body>
<p id="box">
a = >{{a}}
b = > {{b}}
</p>
</body>
<script>
var vm = new Vue({
el:'#box',
data:{
a:1
},
computed:{
b:{
get:function () {
return this.a+1;
},
set:function(val){
this.a = val;
}
}
}
});
/**这样直接改属性的值不行的，需要调用计算属性的set方法**/
document.onclick = function(){
vm.b = 3;
//默认调用计算属性的set方法
};
</script>
Einfache Methode von vue-Instanz
vm ist der Name des erstellten Vue-Instanzobjekts
vm.$el -> 🎜>vm.$data -> sind Daten
var vm2 = new Vue({
data:{},
methods:{}
}).$mount('#box');
var vm2 = new Vue({
el:'#box',
data:{},
methods:{}
});vue-Instanz kann Eigenschaften und Methoden anpassen. Zum Beispiel: var vm2 = new Vue({
aa:'1',//自定义属性
show:function () {
alert(1);
},
el:'#box',
data:{},
methods:{}
});
vm2.$options.show();
console.log(vm2.$options.aa);vm.$log( ->) der Status der aktuellen DatenImplementierung der geteilten Komponenten von Vue.js Methodeneinführung
Detaillierte Analyse mehrerer Haltungen in der Komponentenkommunikation von Vue.js
Das obige ist der detaillierte Inhalt vonSo verwenden Sie berechnete Eigenschaften in Vue. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!