第六十七篇：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
【推荐】国内首个AI IDE，深度理解中文开发场景，立即下载体验Trae
【推荐】编程新体验，更懂你的AI，立即体验豆包MarsCode编程助手
【推荐】抖音旗下AI助手豆包，你的智能百科全书，全免费不限次数
【推荐】轻量又高性能的 SSH 工具 IShell：AI 加持，快人一步
· 阿里最新开源QwQ-32B，效果媲美deepseek-r1满血版，部署成本又又又降低了！
· 开源Multi-agent AI智能体框架aevatar.ai，欢迎大家贡献代码
· Manus重磅发布：全球首款通用AI代理技术深度解析与实战指南
· 被坑几百块钱后，我竟然真的恢复了删除的微信聊天记录！
· AI技术革命，工作效率10个最佳AI工具