好的，下面是一个简单的
购物车项目示例，使用
Vue.js语言编写：
1. 首先，安装
Vue.js和
Vue Router：
```
npm install
vue
npm install
vue-router
```
2. 创建一个
Vue实例并使用
Vue Router：
```
import
Vue from '
vue'
import
VueRouter from '
vue-router'
import App from './App.
vue'
import
Cart from './components/
Cart.
vue'
import Products from './components/Products.
vue'
Vue.use(
VueRouter)
const routes = [
{ path: '/
cart', component:
Cart },
{ path: '/products', component: Products }
]
const router = new
VueRouter({
routes
})
new
Vue({
render: h => h(App),
router
}).$mount('#app')
```
3. 创建一个App.
vue组件，用于渲染整个应用程序：
```
<template>
<div id="app">
<router-link to="/
cart">
Cart</router-link>
<router-link to="/products">Products</router-link>
<router-view></router-view>
</div>
</template>
<script>
export default {
name: 'App'
}
</script>
<style>
#app {
font-family: Arial, Helvetica, sans-serif;
text-align: center;
}
</style>
```
4. 创建一个
Cart.
vue组件，用于显示
购物车中的商品列表和总价：
```
<template>
<div>
<h2>
Cart</h2>
<ul>
<li v-for="item in items" :key="item.id">
{{ item.name }} - {{ item.price }} - {{ item.quantity }}
</li>
</ul>
<p>Total: ${{ total }}</p>
</div>
</template>
<script>
export default {
name: '
Cart',
data: () => ({
items: [
{ id: 1, name: 'Product 1', price: 10, quantity: 2 },
{ id: 2, name: 'Product 2', price: 20, quantity: 1 },
{ id: 3, name: 'Product 3', price: 30, quantity: 3 }
]
}),
computed: {
total() {
return this.items.reduce((acc, item) => acc + (item.price * item.quantity), 0)
}
}
}
</script>
```
5. 创建一个Products.
vue组件，用于显示可供购买的商品列表和添加商品到
购物车：
```
<template>
<div>
<h2>Products</h2>
<ul>
<li v-for="item in items" :key="item.id">
{{ item.name }} - {{ item.price }} - <button @click="addItem(item)">Add to
cart</button>
</li>
</ul>
</div>
</template>
<script>
export default {
name: 'Products',
data: () => ({
items: [
{ id: 1, name: 'Product 1', price: 10 },
{ id: 2, name: 'Product 2', price: 20 },
{ id: 3, name: 'Product 3', price: 30 }
]
}),
methods: {
addItem(item) {
this.$emit('add-to-
cart', item)
alert('Added to
cart: ' + item.name)
}
}
}
</script>
```
6. 在App.
vue中添加一个
购物车对象，以便从Products.
vue中添加商品：
```
<template>
<div id="app">
<router-link to="/
cart">
Cart</router-link>
<router-link to="/products">Products</router-link>
<router-view @add-to-
cart="addTo
Cart"></router-view>
</div>
</template>
<script>
export default {
name: 'App',
data: () => ({
cart: []
}),
methods: {
addTo
Cart(item) {
const existingItemIndex = this.
cart.findIndex(
cartItem =>
cartItem.id === item.id)
if (existingItemIndex !== -1) {
this.
cart[existingItemIndex].quantity++
} else {
this.
cart.push({ ...item, quantity: 1 })
}
}
}
}
</script>
```
7. 在
Cart.
vue中使用App.
vue中的
购物车对象来显示
购物车中的商品：
```
<template>
<div>
<h2>
Cart</h2>
<ul>
<li v-for="item in
cart" :key="item.id">
{{ item.name }} - {{ item.price }} - {{ item.quantity }}
</li>
</ul>
<p>Total: ${{ total }}</p>
</div>
</template>
<script>
export default {
name: '
Cart',
computed: {
cart() {
return this.$root.
cart
},
total() {
return this.$root.
cart.reduce((acc, item) => acc + (item.price * item.quantity), 0)
}
}
}
</script>
```
这个简单的
购物车项目示例演示了如何使用
Vue.js语言编写一个具有路由和组件的应用程序，并在其
中实现
购物车功能。当然，你可以根据你的需求和喜好进行修改和扩展。
1161
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
