vue3简单购物车

css样式：

           * {
				padding: 0;
				margin: 0;
			}

			#shopping {
				width: 50%;
				height: 50px;
				border: 1px solid black;
				display: flex;
			}

			.shopping_inner {
				width: 25%;
				height: 100%;
				border: 1px solid black;
				display: flex;
				align-items: center;
				justify-content: center;
			}

			#commodity div {
				width: 50%;
				height: 50px;
				border: 1px solid black;
				display: flex;
			}

			.shopping_inner button {
				width: 25%;
				height: 55%;
			}

			#num {
				width: 100%;
				height: 100px;
			}

			#add {
				width: 100%;
				height: 100px;
			}

			#add button {
				width: 100px;
				height: 60%;
			}

			#hide input {
				width: 45%;
				height: 100%;
			}

			#hide button {
				width: 10%;
				border: none;
				outline: none;
			}

			#delete_inner input {
				width: 45%;
				height: 100%;
			}

			#delete_inner button {
				width: 10%;
				border: none;
				outline: none;
			}

html结构

<div id="shopping">
			<div class="shopping_inner">
				<b>名称</b>
			</div>
			<div class="shopping_inner">
				<b>价格</b>
			</div>
			<div class="shopping_inner">
				<b>数量</b>
			</div>
			<div class="shopping_inner">
				<b>操作</b>
			</div>
		</div>
		<div id="commodity">
			<div v-for="(item,index) in array" class="border_inner" :style="{'background-color':(item.number!=0?'red':'white')}">
				<div class="shopping_inner">
					{{item.name}}
				</div>
				<div class="shopping_inner">
					{{item.Price}}
				</div>
				<div class="shopping_inner">
					<button class="but" @click="cut(index)" v-show="item.number>0">-</button>
					{{item.number}}
					<button @click="add(index)">+</button>
				</div>
				<div class="shopping_inner">
					<button @click="edit(index)">编辑</button>&nbsp;
					<button @click="dele(index)">删除</button>
				</div>
			</div>
			<div id="num">
				<div class="shopping_inner">

				</div>
				<div class="shopping_inner">
					<span>总价格:</span>
					{{price_inner}}
				</div>
				<div class="shopping_inner">
					<span>总数量:</span>
					{{number_inner}}
				</div>
				<div class="shopping_inner">

				</div>
			</div>
			<button @click="hid">添加商品</button>
			<div id="hide" v-show="hi" style="width: 50%;height: 30px;">
				<input type="text" v-model="name">
				<input type="text" v-model="Price">
				<button @click="add_edd">添加</button>
				<button @click="cancel">取消</button>
			</div>
			<div id="delete_inner" style="width: 50%;height: 30px;background-color: red;" v-show="nonets">
				<input type="text" v-model="inner_name">
				<input type="text" v-model="Price_inner">
				<button @click="con(index)">确认</button>
				<button @click="del">取消</button>
			</div>
		</div>

js，vue行为：

<script type="text/javascript">
			let arr = Vue.createApp({
				data() {
					return {
						array: [{
							name: '商品一',
							Price: 14,
							number: 0
						}, {
							name: '商品二',
							Price: 15,
							number: 0
						}, {
							name: '商品三',
							Price: 20,
							number: 0
						}],
						price_inner: '0',
						number_inner: '0',
						hi: false,
						nonets: false,
						inde_inner: '0',
						Price_inner:'',
						inner_name:''
					};
				},
				methods: {
					// 加
					add(i) {
						arr.array[i].number++;
						arr.number_inner++;
						let arr_arr = 0;
						for (let p = 0; p < this.array.length; p++) {
							arr_arr += this.array[p].Price * this.array[p].number;
						}
						arr.price_inner = arr_arr;
						// console.log(arr_arr);
						if (this.array[i].number > 0) {
							this.array[i].backgroundColor = "rgba(255, 0, 0, 0.3)";
							console.log(i);
						}
					},
					// 减
					cut(p) {
						arr.array[p].number--;
						arr.number_inner--;
						let arr_arr = 0;
						for (let p = 0; p < this.array.length; p++) {
							arr_arr += this.array[p].Price * this.array[p].number
						}
						arr.price_inner = arr_arr;
						console.log(arr_arr);
					},
					hid() {
						this.hi = true;
					},
					// 添加
					add_edd() {
						// console.log(this.name);
						if (this.name != undefined && this.Price != undefined && this.name != '' && this.Price != '') {
							this.array.unshift({
								name: this.name,
								Price: this.Price,
								number: 0,
							})
							this.name = '';
							this.Price = '';
							this.hi = false;
						} else {
							alert('请输入商品');
							this.name = '';
							this.Price = '';
							this.hi = false;
						}

					},
					cancel() {
						this.name = '';
						this.Price = '';
						this.hi = false;
					},
					// 删除
					dele(a) {
						console.log(a);
						this.array.splice(a, 1)
						console.log(this.array);
						let arr_arr = 0;
						let arr_num = 0;
						for (let p = 0; p < this.array.length; p++) {
							arr_arr += this.array[p].Price * this.array[p].number;
							arr_num += this.array[p].number;
						}
						arr.price_inner = arr_arr;
						arr.number_inner = arr_num;
						console.log(arr_arr);
						console.log(arr_num);
						this.nonets = false;
					},
					// 编辑
					edit(a) {
						console.log(this.array[a]);
						this.nonets = true;
						this.inner_name = this.array[a].name;
						this.Price_inner = this.array[a].Price;
						this.inde_inner = a;
					},
					del() {
						this.nonets = false;
					},
					// 编辑确认
					con() {
						// console.log(this.inde_inner);
						this.array[this.inde_inner].name = this.inner_name;
						this.array[this.inde_inner].Price = this.Price_inner;
						this.nonets = false;
						let arr_arr = 0;
						let arr_num = 0;
						// for (let p = 0; p < this.array.length; p++) {
						// 	arr_arr += this.array[p].Price * this.array[p].number;
						// 	arr_num += this.array[p].number;
						// }
						
						for (let k in this.array) {
							console.log(this.array[k]);
								arr_arr += this.array[k].Price * this.array[k].number;
								arr_num += this.array[k].number;
						}
						arr.price_inner = arr_arr;
						arr.number_inner = arr_num;
						console.log(arr_arr);
						console.log(arr_num);
					}
				}
			}).mount('#commodity')
		</script>