Vue计算属性的使用场景

Joker • • 前端笔记 • 241 阅读

首先要知道Vue计算属性是什么？通过属性计算而得来的属性，就是当其依赖属性的值发生变化时，这个属性的值会自动更新，与之相关的DOM部分也会同步自动更新，Vue计算属性的使用场景，当一个值受多个属性影响的时候。

Vue计算属性的使用场景

一、Vue计算属性的特点如下：

1、computed内部的函数在调用时不加()；

2、computed是依赖vm中data的属性变化而变化的，也就是说，当data中的属性发生改变的时候，当前函数才会执行，data中的属性没有改变的时候，当前函数不会执行；

3、computed中的函数必须用return返回；

4、在computed中不要对data中的属性进行赋值操作。如果对data中的属性进行赋值操作了，就是data中的属性发生改变，从而触发computed中的函数，形成死循环了；

5、当computed中的函数所依赖的属性没有发生改变，那么调用当前函数的时候会从缓存中读取。

二、Vue计算属性的使用方法实例代码如下：



  
    vue计算属性的使用
    
  
  
    
      
{{totalPrice}}

    
          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;         }       }     })

说明：这里一个购物车价格统计案例，最后运行结果就是在浏览器上显示出来商品的价格421

三、Vue计算属性的使用场景：

当一个值受多个属性影响的时候，比如：上面的这个购物车价格统计案例

版权声明：
作者：Joker 链接：https://456787.xyz/archives/1469
文章版权归作者所有，转载请注明出处。
THE END
分享
二维码
打赏
< <上一篇
下一篇>>