水果购物车案例，vue

水果购物车案例是一个常见的前端开发示例，它通常用于展示Vue.js框架如何处理数据绑定、组件化以及状态管理。在这个场景中，你可以创建一个虚拟的购物车，包含多种水果（如苹果、香蕉、橙子等），每个水果都有名称、价格和数量。

首先，你会定义一个`Fruit`组件，它有基础属性如名字和价格，并可以增减数量。然后，`ShoppingCart`组件会作为容器，包含多个`Fruit`实例，通过数组存储所有选中的水果。

<!-- Fruit.vue -->
<template>
  <div>
    <input type="number" v-model="quantity">
    {{ name }} - {{ price }}
  </div>
</template>

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

`ShoppingCart.vue`:

<template>
  <div>
    <h2>购物车</h2>
    <ul>
      <li v-for="(fruit, index) in fruits" :key="index">
        <fruit :name="fruit.name" :price="fruit.price" :quantity="fruit.quantity" @increase="increaseQuantity(index)" @decrease="decreaseQuantity(index)"></fruit>
      </li>
    </ul>
    <button @click="clearCart">清空购物车</button>
  </div>
</template>

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

export default {
  components: { Fruit },
  data() {
    return {
      fruits: [
        { name: '苹果', price: '5元', quantity: 2 },
        { name: '香蕉', price: '3元', quantity: 1 },
      ],
    };
  },
  methods: {
    increaseQuantity(index) {
      this.fruits[index].quantity++;
    },
    decreaseQuantity(index) {
      if (this.fruits[index].quantity > 0) {
        this.fruits[index].quantity--;
      }
    },
    clearCart() {
      this.fruits = [];
    },
  },
};
</script>

在这个例子中，Vue的数据绑定和事件系统使得用户交互简单直观，添加删除水果的操作都能实时更新到显示列表中。