帮我用vue写一个商城
时间: 2023-05-13 08:07:27 浏览: 40
非常感谢您的提问!我可以为您提供一个简单的 Vue 商城示例代码,您可以根据您的需求进行修改和扩展。以下是代码:
<template>
<div>
<h1>商城</h1>
<div v-for="product in products" :key="product.id">
<h2>{{ product.name }}</h2>
<p>{{ product.description }}</p>
<p>{{ product.price }}</p>
<button @click="addToCart(product)">加入购物车</button>
</div>
<h2>购物车</h2>
<div v-for="item in cart" :key="item.id">
<p>{{ item.name }}</p>
<p>{{ item.price }}</p>
<button @click="removeFromCart(item)">移除</button>
</div>
</div>
</template>
<script>
export default {
data() {
return {
products: [
{
id: 1,
name: '商品1',
description: '这是商品1的描述',
price: 100,
},
{
id: 2,
name: '商品2',
description: '这是商品2的描述',
price: 200,
},
{
id: 3,
name: '商品3',
description: '这是商品3的描述',
price: 300,
},
],
cart: [],
};
},
methods: {
addToCart(product) {
this.cart.push(product);
},
removeFromCart(item) {
const index = this.cart.indexOf(item);
if (index !== -1) {
this.cart.splice(index, 1);
}
},
},
};
</script>
请注意,这只是一个简单的示例代码,您需要根据您的需求进行修改和扩展。如果您有任何问题或需要更多帮助,请随时联系我。