使用vue制作简单购物车实现添加修改删除

 vue实现简单购物车功能。

根据增加商品数量、减少商品数量、移除商品动态更新总数以及总价格。

可以对购物车进行编辑、添加、删除等功能。

 

话不多说直接上代码：

不过首先要引入vue，不想用本地这个可以直接复制粘贴

<script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>

html部分

<div id="app">

			<table border="1">
				<tr>
					<th>名称</th>
					<th>价格</th>
					<th>数量</th>
					<th>操作</th>
				</tr>
				<tr :style="item.color" v-for="(item,index) in list">
					<td>{{item.name}}</td>
					<td>￥{{item.price}}</td>
					<td><button @click="decrease(index)"
							v-show="list[index].quantity !=0 ">-</button>{{item.quantity}}<button
							@click="increase(index)">+</button></td>
					<td>
						<button @click="click_edit(index)">编辑</button>&nbsp;
						<button @click="del(index)">删除</button>
					</td>
				</tr>

				<tr>
					<td></td>
					<td>总价￥:{{Price}}</td>
					<td>数量:{{Quantity}}</td>
					<td></td>
				</tr>
			</table>

			<!-- 添加 -->
			<button @click="add_to(index)" v-show = "addt==0">添加商品</button>
			<div v-show="add == 0">
				
				<button @click="determine()">添加</button>&nbsp;<button @click="remove(index)">取消</button>
				商品名称<input type="text" v-model="input_name">
			    商品价格<input type="number" v-model="input_price">
			</div>
			<!-- 修改 -->
			<div v-show="edit == 0 ">
				商品名称<input type="text" v-model="input_name">
				商品价格<input type="number" v-model="input_price"><br>
				<button @click="preservation(index)">保存</button>&nbsp;
				<button @click="cancel(index)">取消</button>
			</div>
		</div>

 js部分

	<script>
			Vue.createApp({
				data() {
					return {
						add: 1, //是否点击添加赋值状态
						edit: 1, //是否点击编辑赋值状态
						addt:0,//添加商品是否隐藏
						input_name: "",
						input_price: "",
						red: "123456",
						list: [{
							name: "商品1",
							price: 11,
							quantity: 0,
							color: {
								background: ""
							},
						}, {
							name: "商品2",
							price: 12,
							quantity: 0,
							color: {
								background: ""
							},
						}]

					}

				},
				computed: { //计算属性
					// 总价
					Price() {
						let sum = 0;
						for (var i = 0; i < this.list.length; i++) {
							sum += this.list[i].price * this.list[i].quantity;

						};
						return sum;

					},
					Quantity() {
						let sum = 0;
						for (var i = 0; i < this.list.length; i++) {
							sum += this.list[i].quantity;

						};
						return sum;

					}
				},
				methods: {

					//事件属性
					//删除 -
					decrease(index) {
						this.list[index].quantity--;
						if (this.list[index].quantity == 0) {
							this.list[index].color.background = "";
						}
					},
					// 添加 +
					increase(index) {
						this.list[index].quantity++;
						if (this.list[index].quantity > 0) {
							this.list[index].color.background = "rgba(255, 255, 0, 0.1)";
						}



					},
					// 点击编辑
					click_edit(index) {
						this.addt = 1;
						this.edit = 0;
						this.add=1;
						this.input_name = this.list[index].name;
						this.input_price = this.list[index].price;
						this.index = index; // 全局index

					},
					// 点击保存
					preservation(index) {
						this.list[index].name = this.input_name;
						this.list[index].price = this.input_price;
						this.addt=0;
						this.edit = 1;
					},
					// 点击取消
					cancel(index) {
						this.edit = 1;
						this.addt=0;

					},
					// 点击删除
					del(index) {
						this.list.splice(index, 1)
					},
					// 点击添加
					add_to(index) {
						this.add = 0;
						this.addt=1;
						this.input_name = '';
						this.input_price = '';
					},
					// 确认添加
					determine() {
						this.list.push({
								name: this.input_name,
								price: this.input_price,
								quantity: 0,
								color: {
									background: ""
								},
							}),
							this.add = 1;
							this.addt = 0;
						this.input_name = '';
						this.input_price = '';
					},
					//取消添加
					remove() {
						this.add = 1;
						this.addt = 0;
					}


				}
			}).mount('#app')
		</script>

css

<style>
		*{
			margin: 0%;
			padding: 0%;
		}
		#app {
			position: absolute;
			left: 33%;
			top: 25%;
			
			
		}
		
		table {
			width: 500px;
			height: 300px;
			text-align: center;
		}
	</style>

到这里就结束了。