对于Vue中计算属性的用法（附代码）
时间：2024/4/16作者：未知来源：盾怪网教程人气：
- [摘要]这篇文章给大家介绍的内容是关于Vue中计算属性的用法（附代码），有一定的参考价值，有需要的朋友可以参考一下，希望对你有所帮助。计算属性是个很好玩的东西，在这里面可以对数据模型进行操作，·也...这篇文章给大家介绍的内容是关于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>展现出来的效果是这样的
也是比较简单的用法，在购物模型里面还有金融计算类的应用里面应该用的比较多这个属性
相关文章推荐：
vue.js图片如何转Base64上传图片并预览
vue中如何来定义全局变量和全局方法？（代码）
以上就是关于Vue中计算属性的用法（附代码）的详细内容，更多请关注php中文网其它相关文章！
网站建设是一个广义的术语，涵盖了许多不同的技能和学科中所使用的生产和维护的网站。
关键词：对于Vue中计算属性的用法（附代码）