关于Vue中计算属性的用法（附代码）

互联网 18-8-2

这篇文章给大家介绍的内容是关于Vue中计算属性的用法（附代码），有一定的参考价值，有需要的朋友可以参考一下，希望对你有所帮助。

计算属性是个很好玩的东西，在这里面可以对数据模型进行操作，·也可以使用getter，setter方法。使用的话也是非常的简洁明了

这里写个例子

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

在computed属性里面定义一个计算price的方法，然后对data里面的东西进行操作

下面看一下运行结果：

然后再看一下如何使用getter、setter方法：

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

展现出来的效果是这样的