html"><!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><link rel="stylesheet" href="https://unpkg.com/element-plus/dist/index.css" /><script src="https://unpkg.com/vue@3/dist/vue.global.js"></script><script src="https://unpkg.com/element-plus"></script><title>简易购物车</title><style>table,th,td {border: 1px solid #000;border-collapse: collapse;width: 500px;margin: auto;text-align: center;}button {background-color: #c0bdbd;color: #fff;border: none;padding: 5px 10px;border-radius: 5px;cursor: pointer;}.remove{padding: 5px 10px;border-radius: 5px;cursor: pointer;}.remove:hover{ background-color: rgb(202, 202, 202);color: #fff;}</style>
</head><body><div id="app"><div class="container"><table><tr><th></th><th>商品名称</th><th>价格</th><th>购买数量</th><th>操作</th></tr><tr v-for="(item, index) in goodsList" :key="item.id"><td>{{index+1}}</td><td>{{item.name}}</td><td>{{item.price}}</td><td><el-button type="info" plain :disabled="item.count<=0"@click="reduceCount(index)">-</el-button>{{item.count}}<el-button @click="addCount(index)"type="info" plain>+</el-button></td><td @click="remove(index)" class="remove">移除</td></tr><tr><td colspan="5">总价:{{totalPrice ?? ""}}</td></tr></div></div>
</body><script>const { createApp } = Vue;const app = createApp({data() {return {goodsList: [{id: 1,name: '华为手机',price: 2000,count: 0},{id: 2,name: '手机膜',price: 30,count: 0},{id: 3,name: '篮球',price: 200,count: 0}],totalPrice: null,};},methods: {reduceCount(index) {this.goodsList[index].count--;this.totalPrice = this.goodsList.reduce((acc, cur) => (acc + cur.price * cur.count), 0);if (this.totalPrice <= 0) {this.totalPrice = null;};},addCount(index) {this.goodsList[index].count++;this.totalPrice = this.goodsList.reduce((acc, cur) => acc + cur.price * cur.count, 0);},remove(index) {this.goodsList.splice(index, 1);this.totalPrice = null;}}});app.use(ElementPlus);app.mount('#app');
</script></html>