Vue计算属性的使用场景
首先要知道Vue计算属性是什么？通过属性计算而得来的属性，就是当其依赖属性的值发生变化时，这个属性的值会自动更新，与之相关的DOM部分也会同步自动更新，Vue计算属性的使用场景，当一个值受多个属性影响的时候。
一、Vue计算属性的特点如下：
1、computed内部的函数在调用时不加()；
2、computed是依赖vm中data的属性变化而变化的，也就是说，当data中的属性发生改变的时候，当前函数才会执行，data中的属性没有改变的时候，当前函数不会执行；
3、computed中的函数必须用return返回；
4、在computed中不要对data中的属性进行赋值操作。如果对data中的属性进行赋值操作了，就是data中的属性发生改变，从而触发computed中的函数，形成死循环了；
5、当computed中的函数所依赖的属性没有发生改变，那么调用当前函数的时候会从缓存中读取。
二、Vue计算属性的使用方法实例代码如下：
<!DOCTYPE html>
<html>
<head>
<title>vue计算属性的使用</title>
<script src="vue.js"></script>
</head>
<body>
<div id="app">
<p>{{totalPrice}}</p>
</div>
</body>
<script type="text/javascript">
var app = new Vue({
el: "#app",
data: {
bookes: [
{id: 100,name: 'Unix编程艺术',price: 119},
{id: 200,name: 'Java编程思想',price: 105},
{id: 300,name: '高并发编程',price: 98},
{id: 400,name: 'Spring5',price: 99},
]
},
computed: {
totalPrice: function(){
let result = 0;
// 普通循环
/* for(let i = 0;i < this.bookes.length;i++){
result += this.bookes[i].price;
} */
// 增强for循环，i为索引
/* for(let i in this.bookes){
result += this.bookes[i].price;
} */
// ES6新增for循环直接获取对象
for(let book of this.bookes){
result += book.price
}
return result;
}
}
})
</script>
</html>说明：这里一个购物车价格统计案例，最后运行结果就是在浏览器上显示出来商品的价格421
三、Vue计算属性的使用场景：
当一个值受多个属性影响的时候，比如：上面的这个购物车价格统计案例
除注明外的文章,均为来源:老汤博客,转载请保留本文地址！
原文地址：https://tangjiusheng.com/vue/368.html
原文地址：https://tangjiusheng.com/vue/368.html
赣公网安备36072102000190