Vue2 计算属性

通过一系列的运算，得到一个属性值
这个属性值可以被作用在 methods 和模板结构中

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
const vm = new Vue({
   el: '#app',
   data: {
    rgb:{
     r: 0,
      g: 0,
      b: 0
    }
   },
   methods: {},
   computed: {
    rgb() {
     return `rgb(${this.rgb.r},${this.rgb.g},${this.rgb.b})`;
    }
   }
})

所有的计算属性都需要定义在 computed 节点中

定义时，需要被定义为方法，使用时，当作普通属性

计算使用的数据发生变化时，会重新运算求值

计算属性需要 return 抛出

1
2
3
4
5
6
7
8
9
10
<div>
  r:
  <input type="text" v-model="r" />
  g:
  <input type="text" v-model="g" />
  b:
  <input type="text" v-model="b" />
  <p>{{ rgb }}</p>
  <div class="color" :style="{ backgroundColor: rgb }"></div>
</div>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
export default {
  data() {
    return {
      r: 0,
      g: 0,
      b: 0,
    };
  },
  computed: {
    rgb() {
      return `rgb(${this.r},${this.g},${this.b})`;
    },
  },
};