vue实现简单购物车功能

小白之作，喷子绕道

小白之作，大神勿喷。第一次写博客，有点小紧张。看完记得点赞呦！
这个小dome也不难，纯属自己瞎搞。本次练习是本地模拟数据。废话不多说，上图上代码！代码中有详细的注释

初始效果图

---

操作效果图

---

HTML部分

<!--使用cdn加速链接-->
<script src="https://cdn.jsdelivr.net/npm/vue@2.6.0"></script>

vue实例区域

<div id="app">
		<p>商品信息</p>
		<table class="first" cellspacing="0">
			<!-- 填充表头信息 -->
			<tr v-for="item in msg1" :key="item.id">
				<th v-cloak>{{item.id}}</th>
				<th v-cloak>{{item.name}}</th>
				<th v-cloak>{{item.price}}</th>
				<th v-cloak>{{item.num}}</th>
				<th v-cloak>{{item.Actions}}</th>
			</tr>
			<!-- 填充商品内容 -->
			<tr v-for="item in msg" :key="item.id">
				<td v-cloak>{{item.id}}</td>
				<td v-cloak>{{item.name}}</td>
				<td v-cloak>{{item.price}}</td>
				<td v-cloak>{{item.num}}</td>
				<!-- 填充操作按钮 -->
				<td v-for="items in button">
					<button @click="add(item.id)" v-if="item.hide" v-cloak>{{items.name}}</button>
					<div class="hide" v-else>
						<button @click="add1(item.id)" v-cloak>{{items.jia}}</button>
						<button @click="add2(item.id)" v-cloak>{{items.jian}}</button>
					</div>
				</td>
			</tr>
		</table>
		<p>购物车信息</p>
		<table class="second" cellspacing="0" cellpadding="20px">
			<!-- 填充表头信息 -->
			<tr v-for="item in msg1" :key="item.id">
				<th v-cloak>{{item.id}}</th>
				<th v-cloak>{{item.name}}</th>
				<th v-cloak>{{item.price}}</th>
				<th v-cloak>{{item.num}}</th>
				<th v-cloak>{{item.Actions}}</th>
			</tr>
			<!-- 填充购物车商品 -->
			<tr v-for="item in arr" :key="item.id">
				<td v-cloak>{{item.id}}</td>
				<td v-cloak>{{item.name}}</td>
				<td v-cloak>{{item.price}}</td>
				<td v-cloak>{{item.num}}</td>
				
				<td v-for="items in button">
					<div class="style">
						<button @click="add1(item.id)" v-cloak>{{items.jia}}</button>
						<button @click="add2(item.id)" v-cloak>{{items.jian}}</button>
						<button @click="del(item.id)">X</button>
					</div>
				</td>
			</tr>
			<tr>
				<td colspan="2" v-cloak>总数：{{num}}</td>
				<td colspan="2" v-cloak>总价：{{sum}}</td>
				<td>
					<button class="clear" @click="clear()">清空购物车</button>
				</td>
			</tr>
		</table>
	</div>
</body>

---

CSS部分

[v-cloak] {
			display: none;
		}

		table {
			margin: 0 auto;
			text-align: center;
		}

		.first th,
		.first td,
		.second th {
			border: 1px solid #ccc;
			padding: 1.5vh 5vh;
		}

		.first td {
			border-top: none;
		}

		.second th {
			border: none;
			border-bottom: 1px solid #ccc;
		}

		.second td {
			padding: 10px;
		}

		button {
			padding: .6vw 1vw;
			background-color: #37b8de;
			border: none;
			border-radius: .5vh;
			color: #fff;
		}

		.hide button {
			padding: 1vh 1.1vw;
		}

		p {
			text-align: center;
			color: #37b8de;
			font-weight: bold;
		}

		.clear {
			background: red;
			float: right;
		}

		.style button:nth-child(2),
		.hide button:nth-child(2) {
			background: #F90;
		}

		.style button:last-child {
			background: red;
		}

		.style button {
			width: 3vw;
		}

---

JavaScript部分

var vm = new Vue({
			el: "#app",
			data: {
				num: 0,//总数
				sum: 0,//总价
				arr: [],//购物车中的商品
				button: [{
					name: "加入购物车",
					jia: "+",
					jian: "-"
				}],
				msg: [{
					hide: true,
					id: 1,
					name: "鱼香肉丝",
					price: 12,
					num: null
				}, {
					hide: true,
					id: 2,
					name: "宫保鸡丁",
					price: 14,
					num: null
				}, {
					hide: true,
					id: 3,
					name: "土豆丝",
					price: 10,
					num: null
				}, {
					hide: true,
					id: 4,
					name: "米饭",
					price: 2,
					num: null
				}],
				msg1: [{
					id: "id",
					name: "名称",
					price: "价格",
					num: "数量",
					Actions: "Actions"
				}]
			},
			methods: {
				// 点击加入购物车
				add(id) {
					// 循环原数组
					for (let i = 0; i < this.msg.length; i++) {
						// 确保改变的参数为点击项的参数
						if (this.msg[i].id == id) {
							this.msg[i].hide = !this.msg[i].hide;//将“加入购物车”隐藏并显示为“+”、“-”
							this.arr.push(this.msg[i]);//将当前的项添加到新的数组
							this.num += this.msg[i].num = 1;//将当前项中的数量变成1
							this.sum += this.msg[i].price
						}
					}
				},
				// 点击 +
				add1(id) {
					for (let j = 0; j < this.msg.length; j++) {
						(this.msg[j].id == id) ? this.num = ++this.msg[j].num : ""// 点击 + 时，数量变为自增
					};
					this.cound()
				},
				// 点击 -
				add2(id) {
					for (let j = 0; j < this.msg.length; j++) {
						if (this.msg[j].id == id) {
							if (this.msg[j].num <= 0 || null) {
								return alert("亲，不能再减了！");
							} else {
								this.msg[j].num -= 1;
							}
						}
					};
					this.cound()
				},
				// 点击 x
				del(id) {
					for (let j = 0; j < this.msg.length; j++) {
						for (let i = 0; i < this.arr.length; i++) {
							(this.arr[i].id == id) ? this.arr.splice(i, 1) : ""//删除当前项商品
						};
						if (this.msg[j].id == id) {//将删除项的参数恢复
							this.msg[j].hide = true;
							this.msg[j].num = null
						}
					};
					this.cound()
				},
				// 清空购物车
				clear() {
					this.arr = [];//将购物车数组清空
					for (let i = 0; i < this.msg.length; i++) {
						this.msg[i].hide = true;
						this.msg[i].num = null
					};
					this.num = this.sum = 0;
				},
				//计算总价、总数
				cound() {
					let sum = 0;//临时总价
					let num = 0;//临时总数
					this.arr.forEach(function (val, index) {
						num += val.num;//累计总数
						sum += val.num * val.price;//累计总价
					});
					this.sum = parseFloat(sum);
					this.num = parseFloat(num);
				}
			}
		})

---