Maison > Article > interface Web > À propos de l'utilisation des propriétés calculées dans Vue (avec code)

À propos de l'utilisation des propriétés calculées dans Vue (avec code)

不言original: 2018-08-02 10:15:341539parcourir

Cet article vous présente l'utilisation des propriétés calculées dans Vue (avec du code). Il a une certaine valeur de référence. Les amis dans le besoin peuvent s'y référer. J'espère qu'il vous sera utile.

Les propriétés calculées sont une chose très intéressante, où vous pouvez exploiter le modèle de données, et vous pouvez également utiliser des méthodes getter et setter. Il est également très concis et clair à utiliser

Écrivez un exemple ici

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

Définissez une méthode pour calculer le prix dans l'attribut calculé , puis Exploiter les éléments dans les données

Jetons un coup d'œil aux résultats :

Voyons ensuite comment utiliser le getter et le setter méthodes :

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

L'effet affiché est comme ceci

est également une utilisation relativement simple , et il est également disponible dans le modèle shopping Cet attribut devrait être davantage utilisé dans les applications informatiques financières

À propos de l'utilisation des propriétés calculées dans Vue (avec code)

Articles Liés