关于Vue中计算属性的用法（附代码）
- 不言原创
- 2018-08-02 10:15:341565浏览
这篇文章给大家介绍的内容是关于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中计算属性的用法（附代码）的详细内容。更多信息请关注PHP中文网其他相关文章！
声明：
本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系admin@php.cn