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:341539Durchsuche

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:&#39;#app&#39;,
        data:{
            package1:[
                {
                    name:&#39;iPhone 7&#39;,
                    price:7199,
                    count:2
                },
                {
                    name:&#39;iPad&#39;,
                    price:2888,
                    count:1
                }
            ],
            package2:[
                {
                    name:&#39;apple&#39;,
                    price:3,
                    count:5
                },
                {
                  name:&#39;Banana&#39;,
                  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:&#39;#app&#39;,
        data:{
          firstName:&#39;Jack&#39;,
          lastName:&#39;Green&#39;
        },
        computed:{
            fullname:{
            //getter,用于读取
            get:function () {
              return this.firstName+ &#39; &#39;+this.lastName;
            },
            //setter
            set:function (newValue) {
                var names=newValue.split(&#39; &#39;);
                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!

Stellungnahme:
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Vorheriger Artikel:Einführung in den Tabellen-Tag in HTML (mit Code)Nächster Artikel:Einführung in den Tabellen-Tag
in HTML (mit Code)