计算属性可读可写,但是在大部分情况下作为只读
<div id="box">
<ul>
<li>
<div>
<input type="checkbox" v-model="isAllChecked">
<span>全选/全不选</span>
</div>
</li>
<!-- 由于v-if与v-for不推荐放在一起,所以可使用template标签,其作用是隔开两者,同时没有副作用 -->
<template v-if="datalist.length">
<li v-for="(item,index ) in datalist" :key="item.id">
<div>
<input type="checkbox" v-model="checkList" :value="item">
</div>
<div>
<img :src="item.poster" alt="">
</div>
<div>
<div>{{item.title}}</div>
<div style="color: red;">价格:{{item.price}}</div>
</div>
<div>
<button @click="item.number--" :disabled="item.number===1">-</button>
{{item.number}}
<button @click="item.number++" :disabled="item.number===item.limit">+</button>
</div>
<div>
<button @click="handleDel(index,item.id)">删除</button>
</div>
</li>
<li>
<div>总金额:{{sum}}</div>
</li>
</template>
<li v-else>
<div>购物车空空如也</div>
</li>
</ul>
var obj = {
data() {
return {
// 勾选的商品列表
checkList: [],
datalist: [{
id: 1,
title: "商品1",
price: 10,
number: 1,
poster:
"https://p0.meituan.net/movie/dc2fed6001e809e4553f90cc6fad9a59245170.jpg@1l_1e_1c_128w_180h",
limit: 5,
},
//省略...
]
}
},
methods: {
// 删除按钮
handleDel(index, id) {
console.log(index);
this.datalist.splice(index, 1)
// 同步更新checkList
this.checkList = this.checkList.filter((item) => item.id !== id)
},
},
computed: {
isAllChecked: {
get() {
return this.checkList.length === this.datalist.length && this.datalist.length !== 0
},
set(checked) {
this.checkList = checked ? this.datalist : []
}
},
// 总金额
sum() {
return this.checkList.reduce((total, item) => total + item.price * item.number, 0)
}
}
}
对比前面的写法,可以说是简洁很多