用vue.js生成购物车

Vue.js生成购物车通常会涉及组件化开发，下面是简化的步骤：

1. **创建组件**：首先，你可以创建一个`CartItem.vue`组件，用于展示单件商品的信息，如名称、价格和数量。这个组件应该包含一些输入属性，比如`name`、`price`和`quantity`。

<template>
  <div class="cart-item">
    <p>{{ name }} - {{ price }}元</p>
    <input type="number" v-model.number="quantity" min="1">
  </div>
</template>

<script>
export default {
  props: ['name', 'price'],
  data() {
    return { quantity: 1 };
  },
};
</script>

2. **购物车列表组件**：创建一个`ShoppingCart.vue`组件，它负责管理购物车的内容和状态，可以使用数组或者对象数组存储商品数据，并遍历显示每个`CartItem`组件。

<template>
  <div class="shopping-cart">
    <ul>
      <li v-for="(item, index) in items" :key="index">
        <CartItem :name="item.name" :price="item.price" :quantity="item.quantity"/>
      </li>
    </ul>
    <button @click="addItem">添加商品</button>
    <button @click="clearCart">清空购物车</button>
  </div>
</template>

<script>
import CartItem from './CartItem.vue';

export default {
  components: {
    CartItem,
  },
  data() {
    return { items: [] };
  },
  methods: {
    addItem() {
      this.items.push({ name: '', price: 0, quantity: 1 });
    },
    clearCart() {
      this.items = [];
    },
  },
};
</script>

3. **应用实例**：在主应用中引入并配置`ShoppingCart`组件。

<template>
  <div id="app">
    <ShoppingCart />
  </div>
</template>

<script>
import ShoppingCart from '@/components/ShoppingCart.vue';

new Vue({
  el: '#app',
  components: {
    ShoppingCart,
  },
});
</script>