第六十七篇:Vue的计算属性
好家伙,
1.什么是计算属性?
首先它是一种属性,其次他有计算这个特殊的性质,
它是一个依赖于其他属性的属性,当依赖的属性发生变化的时候就会触发我们计算属性的逻辑
它会对这个属性进行计算,
所以说它是能够在里面写一些计算逻辑的属性,
所以它叫计算属性(好绕)
2.为什么是计算属性?
在模板中放入太多的逻辑会让模板过重且难以维护。
使用计算属性可以进行代码复用,
从而可以达到“逻辑复用”的效果
特点:
1.定义的时候,要被定义为“方法”
2.在使用计算属性的时候,当普通的属性使用即可
好处:
1.实现了代码的复用
2.只要计算属性中依赖的数据源变化了,则计算属性会自动重新求值!
3.举个例子:
举个例子,做一个可以控制颜色的框
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="">
<meta name="viewport" content="width=device-width,initial-scale=1.0">
<title>Great</title>
<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="r">
</div>
<div>
<span>G:</span>
<input type="text" v-model="g">
</div>
<div>
<span>B:</span>
<input type="text" v-model="b">
</div>
<div class="box" :style="{ backgroundColer:`rgb(${r},${g},${b})`}">
{{ `rgb(${r},${g},${b})` }}
</div>
<button @click="show">确定</button>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue@2"></script>
<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})`)
},
computed:{
//rgb作为一个计算属性别定义为方法格式
//最终,在这个方法中,要返回一个生成好的rgb(x,x,x)的字符串
//rgb(){
// return `rgb(${this.r},${this.g},${this.b})`
// },
}
}
});
console.log(vm)
</script>
</body>
</html>
效果如下:
在上述代码中,
`rgb(${this.r},${this.g},${this.b})`
这一属性反复出现
当我们需要对属性名进行修改或者进行值的更改时会变得非常麻烦
于是这里我们用到计算属性
methods:{
show(){
console.log(rgb)
},
computed:{
//rgb作为一个计算属性别定义为方法格式
//最终,在这个方法中,要返回一个生成好的rgb(x,x,x)的字符串
rgb(){
return `rgb(${this.r},${this.g},${this.b})`
},
}
}
实现了
`rgb(${this.r},${this.g},${this.b})`
的复用,这个例子还行,体现了计算属性的价值,
(其实只有show方法那里能改)
That's all