期末考试题-通过HTML编程Vue3选项式：简易购物车

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><!-- 引用 element-plus 样式 --><!-- 注意：复制官方的 CDN 时加上 https --><link rel="stylesheet" href="https://unpkg.com/element-plus/dist/index.css" /><!-- 使用 CDN 引入 vue3  --><script src="https://unpkg.com/vue@3/dist/vue.global.js"></script><!-- 引用 element-plus 中的 JavaScript --><!-- 注意复制官方的 CDN 时加上 https --><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><!-- vue 容器 --><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;// 创建实例化 vue3 选项式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) {// console.log(index);this.goodsList[index].count--;// 计算购物车中所有商品的总价// 使用reduce方法，将商品的价格乘以数量，然后相加，得到总价，其中acc是累加器，cur是值// 初始值是0，即acc的初始值// 语法：array.reduce(function(total, currentValue, currentIndex, arr), initialValue)this.totalPrice = this.goodsList.reduce((acc, cur) => (acc + cur.price * cur.count), 0);// 若总价小于等于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;}}});// 实例化 element-plus 组件，必须在挂载之前使用app.use(ElementPlus);// 将vue3实例挂载到id为app的容器上app.mount('#app');
</script></html>