简易购物车
效果图：
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>
注意点如下
-
form标签里写了@submit.prevent=“submit”，button里面就不需要再写了@click=“submit”
-
购买数量是数值，type=“number"
-
可以用一个对象来接收表单里填写的数据，实际开发时，大多数都会使用对象的形式来传输数据。看看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;
}
}
- computed里的totalPrice要写成函数的形式
- 必须用一个临时变量sum接收totalPrice的值
- 计算totalPrice也可以用forEach循环
- 如果是将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的知识点，就试着敲了一下，发现有些知识点快忘了，发文记录一下自己碰到的问题，。下面的连接里有详细讲解，小伙伴感兴趣的可以看一下原版视频，跟着敲一下，收获会更大哟。