vue computed属性 基本使用

 1.什么是计算属性

计算属性是指通过一系列运算之后，最终得到一个属性值

这个动态计算出来的属性值可以被模板结构或methods方法使用。

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

2. 声明的时候，计算属性在定义的时候需要定义成方法格式

3. 调用的时候，以属性的方式进行调用

 1.1 好处

1.实现了代码复用

2.只要计算属性中依赖的数据源变化了，则计算属性会重新求值

代码示例如下：

```vue

<template>

  <div>

    <h3>计算属性computed的使用</h3>

    <p>R： <input type="text" v-model.number="r" /></p>

    <p>G： <input type="text" v-model.number="g" /></p>

    <p>B： <input type="text" v-model.number="b" /></p>

    <button @click="show">按钮</button>

    <div class="box" :style="{ backgroundColor: getRGB }">{{ getRGB }}</div>

  </div>

</template>

<script>

export default {

  data() {

    return {

      r: "",

      g: "",

      b: "",

    };

  },

  computed: {

    /**

    * 1.所有的计算属性都需要定义到computed节点下

    * 2.计算属性在定义的时候需要定义为方法格式

    */

    getRGB() {

      //这个方法返回一个RGB形式的字符串

      return `rgb(${this.r},${this.g},${this.b})`;

    },

  },

  methods: {

    show() {

      console.log(this.getRGB);

    },

  },

};

</script>

<style lang="scss" scoped>

.box {

  width: 300px;

  height: 300px;

  border: 1px solid black;

}

</style>

```

 2.总结