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.cn/vue/368.html
原文地址:https://tangjiusheng.cn/vue/368.html