2024-11-27 22:51阅读: 8评论: 0推荐: 0

Vue-购物车案例

需求

实现购物车效果

修改数量, 总价格会实时计算
点击按钮移除书籍

代码

 <!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <script src="./node_modules/vue/dist/vue.global.js"></script>
    <style>
      * {
        margin: 0;
        padding: 0;
      }
      #app {
        margin: 50px;
        width: 500px;
        height: 250px;
        border: 2px dashed black;
      }
      table {
        border: 2px, solid, black;
        width: 480px;
        height: 160px;
        line-height: 25px;
        margin: auto;
      }
      th, td {
        border: 1px, solid, black;
      }
      #totalprice {
        text-align: right;
      }
    </style>
  </head>
  <body>
    <div id="app">
      <table>
        <caption>购物车</caption>
        <thead>
          <tr>
            <th></th>
            <th>书籍名称</th>
            <th>出版日期</th>
            <th>价格</th>
            <th>购买数量</th>
            <th>操作</th>
          </tr>
        </thead>
        <tbody>
          <tr v-for="(product, index) in products" :key="product.id">
            <td>{{ index + 1 }}</td>
            <td>{{ product.name }}</td>
            <td>{{ product.date }}</td>
            <td>￥{{ product.price.toFixed(2) }}</td>
            <td>
              <button @click="reduceQuantity(index)">-</button>{{ product.quantity}}<button @click="addQuantity(index)">+</button>
            </td>
            <td>
              <button @click="removeProduct(index)">移除</button>
            </td>
          </tr>
        </tbody>
        <tfoot>
          <tr>
            <td colspan="6" id="totalprice">总价格: ￥{{ totalprice.toFixed(2) }}</td>
          </tr>
        </tfoot>
      </table>
    </div>
    <script>
      const { createApp } = Vue
      const vm = createApp({
        data() {
          return {
            products: [
              { id: 1, name: '算法导论', date: '2006-09', price: 85.00, quantity: 2 },
              { id: 2, name: 'Unix编程艺术', date: '2006-02', price: 59.00, quantity: 2 },
              { id: 3, name: '编程珠玑', date: '2008-10', price: 39.00, quantity: 2 }
            ]
          }
        },
        computed: {
          totalprice() {
            return this.products.reduce(
              (total, product) => {
                return total + product.price * product.quantity;
              }, 0)
          }
        },
        methods: {
          removeProduct(index) {
            this.products.splice(index, 1);
          },
          reduceQuantity(index) {
            if (this.products[index].quantity > 1) {
              this.products[index].quantity--
            }
          },
          addQuantity(index) {
            this.products[index].quantity++
          },
        }
      }).mount('#app')
    </script>
  </body>
</html>

上一篇Vue-模板和选项式API

下一篇Vue-组合式API

本文作者：khrushchefox

本文链接：https://www.cnblogs.com/khrushchefox/p/18573274

posted @ 2024-11-27 22:51 Khru 阅读(8) 评论(0) 编辑收藏举报

刷新页面返回顶部

登录后才能查看或发表评论，立即登录或者逛逛博客园首页

khrushchefox

Vue-购物车案例

公告

常用链接

我的标签

随笔分类 (117)

随笔档案 (118)

阅读排行榜

评论排行榜

推荐排行榜

最新评论

	<!DOCTYPE html>
	<html lang="en">
	<head>
	<meta charset="UTF-8" />
	<meta http-equiv="X-UA-Compatible" content="IE=edge" />
	<meta name="viewport" content="width=device-width, initial-scale=1.0" />
	<title>Document</title>
	<script src="./node_modules/vue/dist/vue.global.js"></script>
	<style>
	* {
	margin: 0;
	padding: 0;
	}
	#app {
	margin: 50px;
	width: 500px;
	height: 250px;
	border: 2px dashed black;
	}
	table {
	border: 2px, solid, black;
	width: 480px;
	height: 160px;
	line-height: 25px;
	margin: auto;
	}
	th, td {
	border: 1px, solid, black;
	}
	#totalprice {
	text-align: right;
	}
	</style>
	</head>
	<body>
	<div id="app">
	<table>
	<caption>购物车</caption>
	<thead>
	<tr>
	<th></th>
	<th>书籍名称</th>
	<th>出版日期</th>
	<th>价格</th>
	<th>购买数量</th>
	<th>操作</th>
	</tr>
	</thead>
	<tbody>
	<tr v-for="(product, index) in products" :key="product.id">
	<td>{{ index + 1 }}</td>
	<td>{{ product.name }}</td>
	<td>{{ product.date }}</td>
	<td>￥{{ product.price.toFixed(2) }}</td>
	<td>
	<button @click="reduceQuantity(index)">-</button>{{ product.quantity}}<button @click="addQuantity(index)">+</button>
	</td>
	<td>
	<button @click="removeProduct(index)">移除</button>
	</td>
	</tr>
	</tbody>
	<tfoot>
	<tr>
	<td colspan="6" id="totalprice">总价格: ￥{{ totalprice.toFixed(2) }}</td>
	</tr>
	</tfoot>
	</table>
	</div>
	<script>
	const { createApp } = Vue
	const vm = createApp({
	data() {
	return {
	products: [
	{ id: 1, name: '算法导论', date: '2006-09', price: 85.00, quantity: 2 },
	{ id: 2, name: 'Unix编程艺术', date: '2006-02', price: 59.00, quantity: 2 },
	{ id: 3, name: '编程珠玑', date: '2008-10', price: 39.00, quantity: 2 }
	]
	}
	},
	computed: {
	totalprice() {
	return this.products.reduce(
	(total, product) => {
	return total + product.price * product.quantity;
	}, 0)
	}
	},
	methods: {
	removeProduct(index) {
	this.products.splice(index, 1);
	},
	reduceQuantity(index) {
	if (this.products[index].quantity > 1) {
	this.products[index].quantity--
	}
	},
	addQuantity(index) {
	this.products[index].quantity++
	},
	}
	}).mount('#app')
	</script>
	</body>
	</html>