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.总结
