vue.js水果购物车案例

Vue.js水果购物车案例是一个非常经典的Vue.js实例。它通过一个简单的购物车页面，演示了Vue.js的基本使用和相关特性。以下是案例的主要功能和特点：

1. 商品列表展示：在页面中，会展示多个水果商品，包括名称、价格、图片等信息。

2. 商品过滤：用户可以通过关键词搜索商品名称，来筛选符合条件的商品。

3. 商品排序：用户可以通过价格排序和销量排序，来调整商品的展示顺序。

4. 购物车管理：用户可以添加商品到购物车，也可以从购物车中删除商品或者修改商品数量。

5. 实时计算总价：当用户在购物车中添加、删除或者修改商品数量时，页面会实时计算出当前购物车中所有商品的总价。

6. 数据双向绑定：页面中的数据和视图实现了双向绑定，用户修改数据后，视图会实时更新。

相关问题

水果购物车案例，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的数据绑定和事件系统使得用户交互简单直观，添加删除水果的操作都能实时更新到显示列表中。

2、仿照水果购物车案例实现图书购物车。 vue

在Vue.js中，我们可以仿照水果购物车的功能来创建一个图书购物车功能。首先，我们需要设置以下几个关键组件：

1. **商品列表** (BookList): 这将显示所有可用的图书，并包含每个图书的名称、作者、价格等信息。点击图书时，可以将其添加到购物车。

<template>
  <ul>
    <li v-for="book in books" :key="book.id">
      <a @click="addToCart(book)">{{ book.title }} - {{ book.author }} - {{ book.price }}</a>
    </li>
  </ul>
</template>

<script>
export default {
  data() {
    return { books: [] };
  },
  methods: {
    addToCart(book) {
      this.cart.push(book);
    }
  }
};
</script>

2. **购物车列表** (CartList): 显示已选图书和总价。初始时为空，当有图书加入购物车时更新。

<template>
  <div v-if="cart.length > 0">
    <h2>购物车</h2>
    <ul>
      <li v-for="item in cart" :key="item.id">
        {{ item.title }} - {{ item.author }} - {{ item.price }}
      </li>
    </ul>
    <p>总价: {{ calculateTotalPrice() }}</p>
  </div>
</template>

<script>
export default {
  computed: {
    totalItems() {
      return this.cart.length;
    },
    totalPrice() {
      let sum = 0;
      this.cart.forEach(item => {
        sum += item.price;
      });
      return sum;
    }
  },
  methods: {
    calculateTotalPrice() {
      // 算法实现总价格计算
    }
  }
};
</script>

3. **购物车状态管理** (CartService): 可以使用Vuex来管理全局的状态，包括购物车的商品列表和总价。

// store/index.js
import Vue from 'vue';
import Vuex from 'vuex';

const state = {
  cart: []
};

const mutations = {
  addItem(state, book) {
    state.cart.push(book);
  },
  removeItem(state, id) {
    state.cart = state.cart.filter(item => item.id !== id);
  }
};

const actions = {
  addItem({ commit }, book) {
    commit('addItem', book);
  },
  removeItem({ commit }, id) {
    commit('removeItem', id);
  }
};

export default new Vuex.Store({
  state,
  mutations,
  actions
});

然后，在需要的地方注入`store`并使用它：

import { mapState, mapActions } from 'vuex';

export default {
  computed: {
    ...mapState(['cart']),
    totalPrice() {
      // ...
    }
  },
  methods: {
    ...mapActions(['addItem', 'removeItem'])
  }
};

这样就实现了基本的图书购物车功能。用户可以通过点击商品列表中的图书，将其添加到购物车，同时显示购物车的总价格。如有更多需求，例如清空购物车、编辑价格等，可以根据实际情况添加相应功能。