介绍 & lt; !DOCTYPE html>
& lt; html>
& lt; head>
& lt;元charset=癠TF-8"祝辞
& lt; title> Title
& lt; !——& lt;脚本src=癹s/vue.min.js"祝辞& lt;/script>——比;
& lt;脚本src=皏ue.min.js"祝辞& lt;/script>
& lt;/head>
& lt; body>
& lt; div id=癮pp"祝辞
总价:{{价格}}
& lt;/div>
& lt; script>
应用var=new Vue ({
艾尔:& # 39;#应用# 39;
数据:{
package1:(
{
名称:& # 39;iPhone 7 & # 39;
价格:7199年,
数:2
},
{
名称:& # 39;ipad # 39;
价格:2888年,
数:1
}
),
package2):(
{
名称:& # 39;苹果# 39;
价格:3,
数:5
},
{
名称:& # 39;香蕉# 39;
价格:2
数:10
}
)},
计算:{
价格:函数(){
var价格=0;
我(var=0; i< this.package1.length;我+ +){
价格+=this.package1[我].price * this.package1[我].count;
}
我(var=0; i< this.package2.length;我+ +){
价格+=this.package2[我].price * this.package2[我].count;
}
返回价格;
}
}
})
& lt;/script>
& lt;/body>
& lt;/html> & lt; !DOCTYPE html>
& lt; html>
& lt; head>
& lt;元charset=癠TF-8"祝辞
& lt; title> Title
& lt;脚本src=癹s/vue.js"祝辞& lt;/script>
& lt;/head>
& lt; body>
& lt; div id=癮pp"祝辞
姓名:{{fullname}}
& lt;/div>
& lt; script>
应用var=new Vue ({
艾尔:& # 39;#应用# 39;
数据:{
firstName: & # 39;杰克# 39;
姓:& # 39;绿色# 39;
},
计算:{
fullname: {//吸气,用于读取
得到:函数(){
返回。firstName + & # 39;& # 39;+ this.lastName;
},//赋值
设置:函数(newValue) {
var名称=newValue.split (& # 39;& # 39;);
this.firstName=名称[0];
this.lastName=姓名(names.length-1);
}
}
}
})
& lt;/script>
& lt;/body>
& lt;/html>
这篇文章主要介绍了Vue中计算属性案例,具有一定借鉴价值,需要的朋友可以参考下。希望大家阅读完这篇文章后大有收获。下面让小编带着大家一起了解一下。
计算属性是个很好玩的东西,在这里面可以对数据模型进行操作,·也可以使用getter、setter方法。使用的话也是非常的简洁明了
这里写个例子
在计算属性里面定义一个计算价格的方法,然后对数据里面的东西进行操作
下面看一下运行结果:
然后再看一下如何使用getter、setter方法:
展现出来的效果是这样的
也是比较简单的用法,在购物模型里面还有金融计算类的应用里面应该用的比较多这个属性。
感谢你能够认真阅读完这篇文章,希望小编分享Vue中计算属性案例内容对大家有帮助,同时也希望大家多多支持,关注行业资讯频道,遇到问题就找,详细的解决方法等着你来学习!
