- 什么是:自己不保存属性值,需要根据其他属性值经过复杂的计算得到自己的属性值
- 为什么:因为通常需要结果复杂计算得出的结果,都不会保存在数据库中,自然后端也不会给我们提供现成的值直接使用,只能靠我们在前端,利用其它属性的值计算获得
比如:购物车的总价:计算过程复杂,又频繁发生变化的值,通常数据库里都不存,而是完全靠客服端动态计算获得! - 何时:只要界面上想要的值,后端没有直接提供,但是可以根据其他值计算获得,就用计算属性
- 如何:2步
(1).定义一个计算属性:
new Vue({
el:"#app",
data:{
可直接使用的属性
},
methods:{
事件处理函数
},
computed:{
计算属性名(){
//计算属性虽然用法和属性一样,但是本质却是一个函数
//根据data转给你其他属性值,经过复杂的计算获得一个最终的属性值
return 计算结果
}
}
})
(2).在HTML中使用计算属性:
比如:<元素>{{计算属性名}}</元素>
强调:计算属性虽然本质是函数,但是使用时不要加(),和data中的普通属性完全一样
5.结果:运行时new Vue()会自动计算计算属性的结果,代替{{计算属性名}}的位置 6.computed vs methods:
(1).用法:
a.methods中的函数在HTML中使用时必须加()调用
b. computed中的计算属性在HTML中使用时不用加()
(2).效率:当反复使用这个函数或计算属性时
a.methods中的函数,每加一次(),就重复执行一次!--没必要
b.computed中的计算属性结果,只在首次使用时计算一次,然后就被vue缓存起来
从第二次使用开始无需重复计算,就可直接使用缓存中的值--效率更高!
7.总结:何时使用函数?何时使用计算属性?
(1).如果更侧重于使用函数的执行结果数值时,首选计算属性
(2).如果不关心执行结果,反而更侧重于执行一项操作(比如:发送ajax请求),首选mehods中的函数
8.示例:计算购物车总价:
<body>
<!--计算购物车总价-->
<div id="app">
<h3>总价:¥{{total.toFixed(2)}}</h3>
<ul>
<!--小计-->
<li v-for="(p,i) of cart" :key="i">{{i+1}} | {{p.pname}} | {{p.price}} | {{p.count}} | 小计:¥{{(p.price*p.count).toFixed(2)}}</li>
</ul>
</div>
<script>
var vm=new Vue({
el:"#app",
data:{
cart:[
{pname:"华为",price:5588,count:2},
{pname:"苹果",price:8888,count:1},
{pname:"小米",price:3288,count:3}
]
},
methods:{
},
computed:{
//定义计算属性total,根据data总cart数组中的内容,计算出总价
total(){
console.log(`计算了一次总价`);
var result=0;
for(var p of this.cart){
result+=p.price*p.count;
}
return result;
}
}
})
</script>
</body>
