###
Vue3
购物车功能实现
以下是基于
Vue 3 的
购物车功能实现的一个完整示例，涵盖了商品
数量增减、总价计算以及动态更新等功能。
#### 1. 创建
Vue 3 项目并安装必要依赖
首先，创建一个新的
Vue 3 项目，并进入项目目录。随后可以安装所需的依赖项，例如
Vuex 或 Pinia 来管理状态[^1]。
```bash
vue create
vue-shopping-cart
cd
vue-shopping-cart
npm install
vuex@next
```
#### 2. 商品计数器组件 (EsCounter.
vue)
此组件用于控制商品的
数量，提供 `num` 和 `min` 属性，并触发自定义事件来通知父组件
数量的变化[^2]。
```
vue
<template>
<div class="counter">
<button @click="decrease">-</button>
<span>{{ count }}</span>
<button @click="increase">+</button>
</div>
</template>
<script>
export default {
props: {
num: { type: Number, required: true },
min: { type: Number, default: 1 }
},
data() {
return {
count: this.num
};
},
methods: {
increase() {
this.count++;
this.$emit('numChange', this.count);
},
decrease() {
if (this.count > this.min) {
this.count--;
this.$emit('numChange', this.count);
}
}
}
};
</script>
```
#### 3. 商品列表组件 (EsGoods.
vue)
在此组件中，使用 `<es-counter>` 子组件监听其自定义事件 `numChange` 并处理逻辑。
```
vue
<template>
<div class="goods-item">
<h3>{{ name }}</h3>
<p>单价：￥{{ price }}</p>
<div class="count">
<es-counter :num="quantity" :min="1" @numChange="updateQuantity"></es-counter>
</div>
</div>
</template>
<script>
import EsCounter from './EsCounter.
vue';
export default {
components: { EsCounter },
props: {
name: String,
price: Number,
quantity: Number
},
methods: {
updateQuantity(newQty) {
this.$emit('quantityUpdated', newQty); // 向上级传递新的
数量
}
}
};
</script>
```
#### 4.
购物车页面 (ShoppingCart.
vue)
该页面负责显示所有已选商品及其总计金额，并允许删除商品或调整
数量[^5]。
```
vue
<template>
<div class="shopping-cart">
<h2>我的
购物车</h2>
<ul>
<li v-for="(item, index) in cartItems" :key="index">
{{ item.name }} × {{ item.quantity }}
<button @click="removeItem(index)">移除</button>
</li>
</ul>
<p>
合计：￥{{ totalAmount.toFixed(2) }}</p>
</div>
</template>
<script>
export default {
data() {
return {
cartItems: [
{ name: '苹果', price: 5, quantity: 2 },
{ name: '香蕉', price: 3, quantity: 4 }
]
};
},
computed: {
totalAmount() {
return this.cartItems.reduce(
(sum, item) => sum + item.price * item.quantity,
0
);
}
},
methods: {
removeItem(index) {
this.cartItems.splice(index, 1);
}
}
};
</script>
```
#### 5. 使用 JavaScript 表达式绑定属性
在模板中可以通过插值语法嵌入复杂的 JavaScript 表达式，从而增强灵活性[^4]。
```
vue
<li v-bind:id="'cart-item-' + index">{{ item.name }}</li>
<p v-if="totalAmount > 0">您有未支付的商品！</p>
<p v-else>您的
购物车为空。</p>
```
---
### 总结
上述代码展示了如何借助
Vue 3 构建一个基础的
购物车应用，包括商品
数量调节、总价计算以及简单的交互操作。通过合理拆分组件结构，可以使代码更加模块化和易于维护。
本文介绍了如何在Vue.js应用中实现购物车的总价计算功能。通过监听购物车内商品的数量变化，动态更新商品总价，展示实时的购物车合计金额。
最低0.47元/天 解锁文章
扫一扫
1946
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
