Heim > Artikel > Web-Frontend > Über die Verwendung berechneter Eigenschaften in Vue (mit Code)
Über die Verwendung berechneter Eigenschaften in Vue (mit Code)
- 不言Original
- 2018-08-02 10:15:341546Durchsuche
Dieser Artikel stellt Ihnen die Verwendung berechneter Eigenschaften in Vue vor (mit Code). Ich hoffe, dass er für Freunde hilfreich ist.
Berechnete Eigenschaften sind eine sehr interessante Sache, bei der Sie das Datenmodell bedienen und auch Getter- und Setter-Methoden verwenden können. Es ist auch sehr prägnant und klar zu verwenden
Schreiben Sie hier ein Beispiel
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Title</title>
<!--<script src="js/vue.min.js"></script>-->
<script src="vue.min.js"></script>
</head>
<body>
<div id="app">
总价：{{prices}}
</div>
<script>
var app=new Vue({
el:'#app',
data:{
package1:[
{
name:'iPhone 7',
price:7199,
count:2
},
{
name:'iPad',
price:2888,
count:1
}
],
package2:[
{
name:'apple',
price:3,
count:5
},
{
name:'Banana',
price:2,
count:10
}
]},
computed:{
prices:function () {
var prices=0;
for(var i=0;i<this.package1.length;i++){
prices+=this.package1[i].price*this.package1[i].count;
}
for (var i=0;i<this.package2.length;i++){
prices+=this.package2[i].price*this.package2[i].count;
}
return prices;
}
}
})
</script>
</body>
</html>
Definieren Sie eine Methode zur Preisberechnung im berechneten Attribut und Verwenden Sie dann die Daten. Betreiben Sie die darin enthaltenen Dinge.
Schauen wir uns die Ergebnisse an:
Dann schauen wir uns an, wie Getter und Setter verwendet werden Methoden:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="js/vue.js"></script>
</head>
<body>
<div id="app">
姓名：{{fullname}}
</div>
<script>
var app=new Vue({
el:'#app',
data:{
firstName:'Jack',
lastName:'Green'
},
computed:{
fullname:{
//getter，用于读取
get:function () {
return this.firstName+ ' '+this.lastName;
},
//setter
set:function (newValue) {
var names=newValue.split(' ');
this.firstName=names[0];
this.lastName=names[names.length-1];
}
}
}
})
</script>
</body>
</html>
Der gezeigte Effekt ist so
ist dort auch relativ einfach anzuwenden sind auch finanzielle Berechnungen im Einkaufsmodell.
Empfohlene verwandte Artikel:
So konvertieren Sie vue.js-Bilder in Base64, laden Bilder hoch und Sehen Sie sich eine Vorschau an
Wie definiere ich globale Variablen und globale Methoden in Vue? (Code)
Das obige ist der detaillierte Inhalt vonÜber die Verwendung berechneter Eigenschaften in Vue (mit Code). Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!