用vue3写一个购物车系统
时间: 2024-05-29 12:03:44 浏览: 16
好的,下面是一个简单的购物车系统的代码示例:
```
<template>
<div class="cart">
<h2>购物车</h2>
<table>
<thead>
<tr>
<th>商品</th>
<th>单价</th>
<th>数量</th>
<th>总价</th>
<th>操作</th>
</tr>
</thead>
<tbody>
<tr v-for="(item, index) in cartItems" :key="item.id">
<td>{{ item.name }}</td>
<td>{{ item.price }}</td>
<td>
<button @click="decrementQuantity(index)">-</button>
{{ item.quantity }}
<button @click="incrementQuantity(index)">+</button>
</td>
<td>{{ item.price * item.quantity }}</td>
<td><button @click="removeItem(index)">删除</button></td>
</tr>
</tbody>
<tfoot>
<tr>
<td colspan="3"></td>
<td>合计:{{ totalPrice }}</td>
<td><button @click="checkout">结算</button></td>
</tr>
</tfoot>
</table>
</div>
</template>
<script>
import { reactive } from 'vue';
export default {
name: 'Cart',
setup() {
const cartItems = reactive([
{ id: 1, name: '商品1', price: 10, quantity: 2 },
{ id: 2, name: '商品2', price: 20, quantity: 1 },
{ id: 3, name: '商品3', price: 30, quantity: 3 },
]);
const removeItem = (index) => {
cartItems.splice(index, 1);
};
const incrementQuantity = (index) => {
cartItems[index].quantity++;
};
const decrementQuantity = (index) => {
if (cartItems[index].quantity > 1) {
cartItems[index].quantity--;
}
};
const totalPrice = computed(() => {
return cartItems.reduce((total, item) => total + item.price * item.quantity, 0);
});
const checkout = () => {
// 结算逻辑
};
return {
cartItems,
removeItem,
incrementQuantity,
decrementQuantity,
totalPrice,
checkout,
};
},
};
</script>
<style>
.cart {
max-width: 600px;
margin: 0 auto;
}
table {
width: 100%;
border-collapse: collapse;
margin: 20px 0;
}
th,
td {
text-align: center;
padding: 10px;
border: 1px solid #ddd;
}
th {
background-color: #f2f2f2;
}
td button {
border: none;
background-color: #f2f2f2;
cursor: pointer;
}
td button:hover {
background-color: #ddd;
}
tfoot td {
font-weight: bold;
}
</style>
```
该示例使用了Vue 3的`reactive`和`computed`函数,`reactive`将数据转换为响应式对象,`computed`计算购物车的总价。购物车中的每个商品都有一个`removeItem`方法,一个`incrementQuantity`方法和一个`decrementQuantity`方法,这些方法用于增加或减少商品的数量或从购物车中删除商品。购物车还有一个`checkout`方法,用于结算购物车。
相关推荐
![zip](https://img-home.csdnimg.cn/images/20210720083736.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)