<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>vue计算属性</title>
<script src="./libs/vue.js"></script>
<style>
.box {
width: 200px;
height: 200px;
border: 1px solid #ccc;
}
</style>
</head>
<body>
<div id="app">
<div>
<span>R: </span>
<input type="text" v-model.number="r">
</div>
<div>
<span>G: </span>
<input type="text" v-model.number="g">
</div>
<div>
<span>B: </span>
<input type="text" v-model.number="b">
</div>
<hr>
<!-- 专门用来呈现颜色的div盒子 -->
<div class="box" :style="{ backgroundColor:`rgb(${r},${g},${b})`}">
{{ `rgb(${r},${g},${b})` }}
</div>
<button @click="show">按钮</button>
</div>
<script>
const vm = new Vue({
el: '#app',
data: {
// 红色
r: 0,
// 绿色
g: 0,
//蓝色
b: 0,
},
methods: {
// 点击按钮,在终端显示最新的颜色
show() {
console.log(`rgb(${this.r},${this.g},${this.b})`)
}
}
})
</script>
</body>
</html>
结果:
运用计算属性,优化:
最终打印出来的vm,展开后就是一个rgb(x,x,x)属性,后面就可以直接用,就当作一个普通属性用即可
完整代码如下:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>vue计算属性</title>
<script src="./libs/vue.js"></script>
<style>
.box {
width: 200px;
height: 200px;
border: 1px solid #ccc;
}
</style>
</head>
<body>
<div id="app">
<div>
<span>R: </span>
<input type="text" v-model.number="r">
</div>
<div>
<span>G: </span>
<input type="text" v-model.number="g">
</div>
<div>
<span>B: </span>
<input type="text" v-model.number="b">
</div>
<hr>
<!-- 专门用来呈现颜色的div盒子 -->
<div class="box" :style="{ backgroundColor: rgb }">
{{ rgb }}
<!-- !!! 不用模板字符串,直接修改用rgb这个属性 -->
</div>
<button @click="show">按钮</button>
</div>
<script>
const vm = new Vue({
el: '#app',
data: {
// 红色
r: 0,
// 绿色
g: 0,
//蓝色
b: 0,
},
methods: {
// 点击按钮,在终端显示最新的颜色
show() {
console.log(this.rgb)
}
},
computed:{ // 所以的计算属性,都要被定义到computed节点之下,计算属性在定义的时候,要被定义成“方法格式”
rgb(){ // rgb作为一个计算属性,被定义成"方法格式",最终,在这个方法中,要返回一个生成好的rgb(x,x,x)的字符串
return `rgb(${this.r},${this.g},${this.b})` // this代表当前这个vm实例!
}
}
});
console.log(vm)
</script>
</body>
</html>
什么是计算属性:
计算属性指的是通过一系列运算之后,最终得到一个属性值。
这个动态计算出来的属性值可以被模板结构或methods方法使用。示例代码如下:
特点:
1.定义的时候。要被定义为“方法”
2.在使用计算属性的时候,当普通的属性使用即可
好处:
1.实现了代码的复用
2.只要计算属性中依赖的数据源变化了,则计算属性会自动重新求值。如下图: