Vue计算属性

1.1目的

设计的目的是为了便于运算，如果模板当中放入太多的逻辑会让模板过重且难以维护

1.2语法

1.计算的方法写在computed中和data、methods等一个层级

2.内部可以使用data的数据

3.执行完毕要返回结果（内部需要return）

4.定义的是方法函数，调用的属性

1.3使用

        // 计算属性
        computed: {
          // 总价
          totalPrice () {
            // 找到选中的水果 isChecked=true
            const checkedFruit = this.fruitList.filter(v => {
              // true 要这个水果
              // false 不要这个水果
              if (v.isChecked === true) {
                // 选中了 要
                return true
              } else {
                // 不选中 不要
                return false
              }
              // return v.isChecked // true false
            })
            // 定义价格
            let _price = 0
            // 累加
            checkedFruit.forEach(v => {
              // 累加 单价 乘以 个数
              _price += v.num * v.price
            })
            // 返回
            return _price
          },
          // 总个数
          totalCount () {
            // 找到选中的水果 isChecked=true
            const checkedFruit = this.fruitList.filter(v => {
              // true 要这个水果
              // false 不要这个水果
              return v.isChecked
            })
            console.log('checkedFruit:', checkedFruit)
            // 定义个数
            let _count = 0
            // 累加
            checkedFruit.forEach(v => {
              _count += v.num
            })
            // return '总个数'
            return _count
          }
        }

这是一个demo的计算属性部分代码，这里面有两个计算属性，最后都通过return返回了需要计算的数值，同时也使用filter返回一个新数组的方法赋值给checkFruit，通过这个新数组就可以计算购买的总量，和购买的总价格