一些初学者可能对计算属性和侦听属性的使用场景感到困惑不解,本文主要介绍两者的用法、使用场景及其两者的区别。
一.Vue计算属性——快速入门
1、什么是计算属性
我们知道,Vue.js提供了完全的 JavaScript 表达式支持,所以可以在模版的 {{ }} 花括号或者属性绑定内书写JavaScript 语句。那么问题来了,在模板中放入太多的逻辑会让模板过重且难以维护,所以就有了计算属性,目的是为了在模板中绑定表达式是非常便利的。
例如说某宝上有一件衣服100块,老板需要计算利润。
new Vue({
el: '#app',
data:{
clothes:{id:1,price:100,name:'衣服',count:1},
//衣服信息
}
})
上线价:{{ clothes.price }}
利润需要减去成本和运费:
new Vue({
el: '#app',
data:{
clothes:{id:1,price:100,name:'衣服',count:1},
cost:30,//成本
freight:5,//运费
}
})
这时候,利润:
随着费用的增加,计算利润的表达式会越来越长,这时候视图层(view)的逻辑越来越复杂,代码会越来越臃肿,变得难以维护。
2、计算属性的具体用法
Vue.js计算属性中可以运用各种逻辑运算,函数调用等,最终会返回一个结果,就是计算属性后得到的结果,这个过程简化了在vue.js模版中使用过多的JavaScript 语句计算过程。在vue.js里面,所有的计算属性都写在 vue 实例的 computed 属性中,这个计算属性就是一个函数,返回值为最后属性的值。
同是上面的例子:
上线价:{{ clothes.price }}