苏州知名高端网站建设企业长沙网站优化体验
Vue 渐进式JavaScript 框架 基于Vue2的学习笔记 - Vue 计算属性（computed）
目录
计算属性
简单示例
字符串方法实现
计算属性实现
计算属性-改造案例
模糊查询
购物车-计算金额改造
总结
计算属性
Vue 的计算属性（computed properties）是一种特殊的属性，它依赖于其他数据属性，当这些依赖的数据属性发生变化时，计算属性的值会自动更新。计算属性允许你在模板中声明式地处理复杂逻辑，而不是在模板中直接编写复杂的表达式或方法调用。
简单示例
做一个简单基本的一个计算属性示例。赋值小写字母，显示首字母大写。
字符串方法实现
使用函数方法直接在原地处理业务。
示例如下：
<script src="../lib/vue.js"></script>
<div id="box">{{name.substring(0, 1).toUpperCase() + name.substring(1)}}
</div>
<script>let vm = new Vue({el : '#box',data: {name : 'zhangsan'}})
</script>这样实现，业务逻辑比较混乱，延展性可维护性差。
计算属性实现
计算属性(防止模板过重难以维护)，负责逻辑放在计算属性中来写。
计算属性，有缓存，基于依赖的缓存。
示例如下：
<script src="../lib/vue.js"></script>
<div id="box">{{computedName}}
</div>
<script>let vm = new Vue({el : '#box',data: {name : 'zhangsan',},// 计算属性computed:{computedName() {return this.name.substring(0,1).toUpperCase() + this.name.substring(1)}}})
</script>计算属性有缓存，而方法没有，同样调用三次的话，方法会调用三次；
而计算属性值未改变只会调用一次。
计算属性-改造案例
使用计算属性改造之前的案例。
模糊查询
改造上面的过滤应用所做的模糊查询案例。使用计算属性处理，而不再使用原有的方法处理。
示例如下：
<script src="../lib/vue.js"></script>
<div id="box"><input type="text" v-model="mytext"><ul><li v-for="item in computedList" :key="item">{{item}}</li></ul>
</div>
<script>let vm = new Vue({el:'#box',data: {mytext:'',datalist:['aa', 'bb', 'cc', 'dd', 'ee', 'de']},computed: {computedList() {return this.datalist.filter(item=> item.includes(this.mytext))}}})
</script>购物车-计算金额改造
修改实战购物车的案例，使用计算属性进行优化。
示例如下：
<!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-根据 indexthis.datalist.splice(index, 1)// 删除checklist-根据idthis.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）