当前位置：首页 > web >正文

vue2.0 的计算属性

web 2025/8/21 0:33:05

个人简介

👨‍💻‍个人主页：魔术师
📖学习方向：主攻前端方向，正逐渐往全栈发展
🚴个人状态：研发工程师，现效力于政务服务网事业
🇨🇳人生格言： “心有多大，舞台就有多大。”
📚推荐学习： 🍉Vue2 🍋Vue3 🍓Vue2/3项目实战 🥝Node.js实战 🍒Three.js 🍇鸿蒙开发
🪧使用备注：仅供学习交流严禁用于商业用途，若发现侵权内容请及时联系作者
📤更新进度：持续更新内容
🤙个人名片：每篇文章最下方都有加入方式，旨在交流学习&资源分享，快加入进来吧

vue2.0 的计算属性

文章目录

- 个人简介
- vue2.0 的计算属性
- 7. 计算属性
- - 7.1 什么是计算属性
  - 7.2 计算属性的特点
  - 7.3 计算属性-案例

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 实例，得到 ViewModelvar 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>