Vue的计算属性

computed: {

    mapWidth() {

      let str = '';

      if (this.leftFlag && this.rightFlag) {//左边和右边面板都展开时

        str = 'calc(100% - 536px)';

      } else {

        if (this.leftFlag || this.rightFlag) {//左边或右边面板都展开时

          str = 'calc(100% - 268px)';

        } else {

          str = '100%';

        }

      }

      return str;

    }

  },

<div class="right-container" :style="{'width': mapWidth}"></div>

使用一个计算属性，可以将一个函数转变成一个变量，而且这个变量还能使用监听方法，来监听mapWidth

watch: {

    mapWidth() {

      //随mapWidth数值变化要执行的方法。

  } 

}

使用场景：当页面中有某些数据依赖其他数据进行变动的时候，可以使用计算属性
计算属性 computed 是基于data中数据进行处理的，data数据变化，他也跟着变化
当data中数据没有发生改变时，我们调用computed中函数n次，只会进行缓存（执行一次）
每个计算属性都包含两个set、get 属性