个人简介
👨💻个人主页： 魔术师
📖学习方向： 主攻前端方向，正逐渐往全栈发展
🚴个人状态： 研发工程师，现效力于政务服务网事业
🇨🇳人生格言： “心有多大，舞台就有多大。”
📚推荐学习： 🍉Vue2 🍋Vue3 🍓Vue2/3项目实战 🥝Node.js实战 🍒Three.js 🍇鸿蒙开发
🪧使用备注：仅供学习交流 严禁用于商业用途 ，若发现侵权内容请及时联系作者
📤更新进度：持续更新内容
🤙个人名片：每篇文章最下方都有加入方式，旨在交流学习&资源分享，快加入进来吧
vue2.0 的计算属性
7. 计算属性
7.1 什么是计算属性
- 计算属性指的是通过一系列运算之后，最终得到一个属性值。
- 这个动态计算出来的属性值可以被模板结构或 methods 方法使用。示例代码如下：
<!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>Document</title>
</head>
<body>
<div id="app">
<h3>count 的值是：{{ count }}</h3>
<!-- 不建议这么写（浪费性能） -->
<!-- <p>count * count 的值是：{{count * count}}</p>
<p>count * count 的值是：{{count * count}}</p>
<p>count * count 的值是：{{count * count}}</p> -->
<!-- 3. 计算属性在使用的时候，不要当作函数去调用， -->
<!-- 而是当作普通的属性，来直接使用就好了 -->
<p>count * count 的值是：{{ num }}</p>
<p>count * count 的值是：{{ num }}</p>
<p>count * count 的值是：{{ num }}</p>
</div>
<script src="./lib/vue-2.6.12.js"></script>
<script>
const vm = new Vue({
el: '#app',
data: {
count: 2
},
// 计算属性
computed: {
// 1. 计算属性在定义的时候，需要被定义成函数
// 4. 注意：计算属性，会缓存上一次计算的结果
// 5. 只有计算属性中依赖的数据项发生变化的时候，才会重新对计算属性求值
num() {
console.log('执行了 num 这个计算属性')
// 2. 计算属性，必须 return 一个计算的结果，否则，就是无效的计算属性
return this.count * this.count
}
}
})
</script>
</body>
</html>
7.2 计算属性的特点
- 虽然计算属性在声明的时候被定义为方法，但是计算属性的本质是一个属性
- 计算属性会缓存计算的结果，只有计算属性依赖的数据变化时，才会重新进行运算
7.3 计算属性-案例
效果图：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<script src="./lib/vue-2.6.12.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 盒子 -->
<!-- 如果动态为元素的 style 绑定样式，需要遵守如下的语法规则： -->
<!-- :style="样式对象" -->
<!-- :style="{ 样式的属性: 值, 样式的属性: 值 }" -->
<div class="box" :style="{ 'background-color': rgb }">
</div>
<!-- 计算属性在使用的时候，当作普通属性来用就好 -->
<p>{{ rgb }}</p>
<button @click="show">按钮</button>
</div>
<script>
// 创建 Vue 实例，得到 ViewModel
var vm = new Vue({
el: '#app',
data: {
// 红色
r: 0,
// 绿色
g: 0,
// 蓝色
b: 0
},
// 计算属性
computed: {
// 1. 计算属性，在定义的时候，要定义成函数
// 注意：只要计算属性中，用到的 data 数据发生了变化，就会重新对计算属性求值
rgb() {
// 2. 必须 return 一个结果
return `rgb(${this.r}, ${this.g}, ${this.b})`
}
},
methods: {
// 点击按钮，在终端显示最新的颜色
show() {
// 在 methods 函数中，要访问计算属性的值，要通过 this.计算属性 来访问
console.log(this.rgb)
}
},
});
</script>
</body>
</html>