通俗易懂 vue购物车案例 简化版 使用 watch方法

通俗易懂 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值的时候 也会监听到 然后触发计算函数