主页 > 软件开发 >

Vue计算属性（computed）

软件开发
2025-08-27 04:27:01

Vue 渐进式JavaScript 框架基于Vue2的学习笔记 - Vue 计算属性（computed）

计算属性

简单示例

字符串方法实现

计算属性实现

计算属性-改造案例

模糊查询

购物车-计算金额改造

总结

计算属性

Vue 的计算属性（computed properties）是一种特殊的属性，它依赖于其他数据属性，当这些依赖的数据属性发生变化时，计算属性的值会自动更新。计算属性允许你在模板中声明式地处理复杂逻辑，而不是在模板中直接编写复杂的表达式或方法调用。

简单示例

做一个简单基本的一个计算属性示例。赋值小写字母，显示首字母大写。

字符串方法实现

使用函数方法直接在原地处理业务。

示例如下：

这样实现，业务逻辑比较混乱，延展性可维护性差。

计算属性实现

计算属性(防止模板过重难以维护)，负责逻辑放在计算属性中来写。

计算属性，有缓存，基于依赖的缓存。

示例如下：

计算属性有缓存，而方法没有，同样调用三次的话，方法会调用三次；

而计算属性值未改变只会调用一次。

计算属性-改造案例

使用计算属性改造之前的案例。

模糊查询

改造上面的过滤应用所做的模糊查询案例。使用计算属性处理，而不再使用原有的方法处理。

示例如下：

购物车-计算金额改造

修改实战购物车的案例，使用计算属性进行优化。

示例如下：

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <script src="../lib/vue.next.js"></script> <style> li { display:flex; justify-content: space-around; padding: 10px; } li img { width:100px; } </style> </head> <body> <div id="box"> <input type="checkbox" v-model="isAll" @change="allGoods"> 全选/全不选 <ul> <li v-for="(item, index) in datalist" :key="item.id"> <input type="checkbox" v-model="checkList" :value="item" @change="itemGoods"> <img :src="item.pic" alt=""> <div> <div>{{item.name}}</div> <div style="color:blue">￥{{item.price}}</div> </div> <div> <button @click="item.number--" :disabled="item.number === 1">-</button> <span>{{item.number}}</span> <button @click="item.number++" :disabled="item.number === item.limit">+</button> </div> <div> <button @click="handleDelGoods(index, item.id)">删除</button> </div> </li> </ul> <div>总金额：{{ computedSum }}</div> </div> <script> let obj = { computed: { computedSum() { let total = 0 // 累加计算 checkList 数组中的每一项的价格*数量 this.checkList.forEach(item => { total += item.price * item.number }) return total } }, data() { return { checkList: [], // 勾选购物车的数据 isAll : false, datalist: [{ id:1, name:"商品1", price: 10, number:1, limit:5, //限购 pic: "http://localhost:63342/WWW/images/1.jpg" }, { id:2, name:"商品2", price: 20, number:2, limit:6, //限购 pic: "http://localhost:63342/WWW/images/2.jpg" }, { id:3, name:"商品3", price: 30, number:3, limit:7, //限购 pic: "http://localhost:63342/WWW/images/3.jpg" }, { id:4, name:"商品4", price: 40, number:4, limit:8, //限购 pic: "http://localhost:63342/WWW/images/4.jpg" } ] } }, methods : { handleDelGoods(index, id) { // 删除的是datalist-根据 index this.datalist.splice(index, 1) // 删除checklist-根据id this.checkList = this.checkList.filter(item=>item.id !== id) // 同步一下状态 this.itemGoods() }, allGoods() { if (this.isAll) { this.checkList = this.datalist } else { this.checkList = [] } }, itemGoods() { if (this.checkList.length === this.datalist.length) { this.isAll = true } else { this.isAll = false } } } } Vue.createApp(obj).mount("#box"); </script> </body> </html>

总结

Vue 渐进式JavaScript 框架基于Vue3的学习笔记 - Vue 计算属性（computed）

标签：

Vue计算属性（computed）由讯客互联软件开发栏目发布，感谢您对讯客互联的认可，以及对我们原创作品以及文章的青睐，非常欢迎各位朋友分享到个人网站或者朋友圈，但转载请说明文章出处“Vue计算属性（computed）”

上一篇
解锁机器学习核心算法｜主成分分析（PCA）：降维的魔法棒