通俗易懂 vue购物车案例 简化版 使用 watch方法
首先我们把页面简单的写出来
html:
<div v-for="(item,index) in goodList">
<div>名字:{
{item.name}},价格:{
{item.price}},数量:{
{item.num}},总价格:{
{item.price*item.num}}</div>
<button @click="add(index)">加一个</button>
<button @click="subtract(index)">减一个</button>
</div>
<p>总数:{
{totalNum}}</p>
<p>总价格:{
{totalPrice}}</p>
js: 定义变量
data: {
return {
//商品列表
goodList: [{
name: '蔬菜',
price: 20,
num: 10
}, {
name: '水果',
price: 10,
num: 5
}, {
name: '面包',
price: 409,
num: 21
}, ],
//总数量
totalNum: 0,
//总价格
totalPrice: 0
}
},
js :定义加商品数量和减商品数量
add(index) {
this.goodList[index].num += 1
},
subtract(index) {
this.goodList[index].num -= 1
},
渲染一下 是这样的
然后我们就需要写计算总数和总价格的方法了
compute() {
//初始化
//定义总数量总价格
let totalnum = 0
let totalprice = 0
this.goodList.forEach(item => {
totalnum += item.num,
totalprice += item.price * item.num
});
//赋值总数量总价格
this.totalNum = totalnum
this.totalPrice = totalprice
},
定义好之后
我们可以在生命周期 mounted中 计算第一次刚加载出来的总数和总价格
mounted() {
this.compute()
},
然后我们进入页面就是这样了
下一步
我们点击加减商品数量的时候在再次计算
两种方法 推荐第二种
1.就是从点击事件里添加 计算的这个函数 但是不好 因为当你操作比较多的时候 比如 选中 增加 减少等等操作的时候 你就得每一次都添加 如果你不嫌麻烦的话 当我没说
2.使用vue的 watch监听goodList这个值 如果它里面某一个量变化的时候触发计算函数
首先你需要知道vue的watch是啥
官方传送门
因为我们要监听goodList里面的值我们需要深度监听
所以我们这么写
watch: {
goodList: {
handler(newName, oldName) {
this.compute()
},
immediate: true,
deep: true
}
},
然后 我们就可以了
我们也可以把生命周期 mounted中 计算第一次刚加载出来的总数和总价格方法去掉了 因为当我们拿到goodList值的时候 也会监听到 然后触发计算函数