Vue中的计算属性

       在模板中使用插值表达式时，可以书写简单的表达式，但是一旦表达式比较繁琐时就不太合适了，这是就可以用计算属性，计算属性就是在Vue实例中的computed 中定义一个函数，返回最后的结果，函数中可以写任何逻辑运算和判断，可以依赖多个data中定义的变量的数据，只要变量的数据发生改变那么计算属性就会重新执行，视图也会更新

      计算属性可以分为两种写法：普通写法和完整写法

普通写法

export default {
  // 定义变量
  data () {
    return {
      a: 10,
      b: 2,
      str: 'Hello world!'
    }
  },

  computed: {
    // 求data中两个变量的和
    sum () {
      console.log('求和')
      return this.a + this.b
    },
    // 反转字符串
    newStr () {
      return this.str.split('').reverse().join('')
    }
  },
}

完整写法： 计算属性也是变量, 如果想要直接赋值， 就需要使用完整写法 ，比如表单需要做全选的时候需要用完整写法

export default {
  data () {
    return {
      str: 'Hello world!'
    }
  },
  computed: {
    // 完整写法: 直接修改计算属性的值
    res: {
      get () {
        // 返回计算属性的值
        return this.str.split('').reverse().join('')
      },
      set (val) {
        // val最新修改的值
        console.log('修改计算属性的值：', val)
        this.str = val
      }
    }
  }
}