简易购物车

效果图：

v-model双向数据绑定 && 表单提交

<form @submit.prevent="submit">
            <label for="inputText">商品名：</label><input class="inputText" type="text" v-model="tempGoods.goods">
            <label for="inputText">购买数量：</label><input class="inputText" type="number" v-model="tempGoods.count">
            <button>添加</button>
</form>

注意点如下

1. form标签里写了@submit.prevent=“submit”，button里面就不需要再写了@click=“submit”

2. 购买数量是数值，type=“number"

3. 可以用一个对象来接收表单里填写的数据，实际开发时，大多数都会使用对象的形式来传输数据。看看JSON数据格式就知道了。

    tempGoods: {
                           goods: "",
                           price: 8,//价格固定，写死为8元/个
                           count: 0,
                       },
   

计算属性computed

<h1>总价：{{totalPrice}}</h1>

注意点如下

不要写成这个样子

<h1 v-model="totalPrice">总价：{{totalPrice}}</h1>

返回totalPrice值

computed: {
                totalPrice() {
                    let sum=0;
                    for (var i = 0; i < this.goodsList.length; i++) {
                        sum += this.goodsList[i].price * this.goodsList[i].count;
                    }
                    return sum;
                }
            }

1. computed里的totalPrice要写成函数的形式
2. 必须用一个临时变量sum接收totalPrice的值
3. 计算totalPrice也可以用forEach循环
4. 如果是将sum写为了this.totalPrice，则会出现如下错误

v-for渲染数据和标签

		   <ul>
                <li v-for="(item,index) in goodsList">//item和index顺序不能写反
                    商品名：{{goodsList[index].goods+" "}} 价格：{{goodsList[index].price+" "}}元/个
                    <button @click="decrease(index)">- 1</button>
                    <span>数量：{{goodsList[index].count}}</span>
                    <button @click="increase(index)">+ 1</button>
                </li>
            </ul>

添加和删除功能

添加功能：通过表单拿到的数据：将整个对象追加到要渲染的数据goodsList中

//添加要购买的商品
submit() {			
                 //通过push函数将表单数据，追加到自己的渲染页面的数据   
    			this.goodsList.push({
                        goods: this.tempGoods.goods.toString(),
                        price: this.tempGoods.price,
                        count: this.tempGoods.count,
                    })
                },
                    
                    
//goodsList数据渲染页面的数据
                    goodsList: [{
                            goods: "雪梨",
                            price: 2,
                            count: 1,
                        }, {
                            goods: "糍粑",
                            price: 5,
                            count: 1,
                        }, {
                            goods: "冰糖",
                            price: 9,
                            count: 1,
                        },

                    ]

删除功能：从数组中删除数据

//减少预购买的商品数量
decrease(i) {
                    this.goodsList[i].count--;
                    if (this.goodsList[i].count <= 0) {
                        this.goodsList.splice(i, 1);//通过splice函数删除数据，移除购物车里，购买数量为0的商品
                    }
                }

看了b站上的视频，一个简易购物车的视频，感觉挺有意思的，心想挺简单的，刚好可以复习一下Vue3的知识点，就试着敲了一下，发现有些知识点快忘了，发文记录一下自己碰到的问题，。下面的连接里有详细讲解，小伙伴感兴趣的可以看一下原版视频，跟着敲一下，收获会更大哟。

B站教学视频