vue3+ts实现购物车案例

<template>
  <div>
    <h1>购物车</h1>
    <div v-if="cartItems.length === 0">购物车为空</div>
    <ul v-else>
      <li v-for="item in cartItems" :key="item.id">
        {{ item.name }} - {{ item.price }}
        <button @click="removeItem(item.id)">移除</button>
      </li>
    </ul>
    <h2>添加商品</h2>
    <select v-model="selectedItem">
      <option v-for="item in availableItems" :value="item.id" :key="item.id">
        {{ item.name }} - {{ item.price }}
      </option>
    </select>
    <button @click="addItem">添加到购物车</button>
  </div>
</template>

<script lang="ts">
import { defineComponent, ref } from 'vue';

interface Item {
  id: number;
  name: string;
  price: number;
}

export default defineComponent({
  name: 'ShoppingCart',
  setup() {
    const availableItems: Item[] = [
      { id: 1, name: '商品1', price: 10 },
      { id: 2, name: '商品2', price: 20 },
      { id: 3, name: '商品3', price: 30 },
    ];
    const selectedItem = ref<number | null>(null);
    const cartItems = ref<Item[]>([]);

    const addItem = () => {
      if (selectedItem.value !== null) {
        const selectedItemObj = availableItems.find(
          (item) => item.id === selectedItem.value
        );
        if (selectedItemObj) {
          cartItems.value.push(selectedItemObj);
        }
      }
    };

    const removeItem = (id: number) => {
      const index = cartItems.value.findIndex((item) => item.id === id);
      if (index !== -1) {
        cartItems.value.splice(index, 1);
      }
    };

    return {
      availableItems,
      selectedItem,
      cartItems,
      addItem,
      removeItem,
    };
  },
});
</script>

使用defineComponent函数定义了一个名为ShoppingCart的Vue组件。使用setup函数来设置组件的响应式数据和方法。

在setup函数中，定义了availableItems数组来存储可供选择的商品列表。selectedItem是一个ref，用于存储当前选择的商品的ID。cartItems是一个ref，用于存储购物车中的商品列表。

addItem方法用于将选择的商品添加到购物车中。它首先通过selectedItem.value获取当前选择的商品的ID，然后在availableItems数组中查找该商品对象，并将其添加到cartItems数组中。

removeItem方法用于从购物车中移除指定ID的商品。它使用findIndex方法找到要移除的商品在cartItems数组中的索引，并使用splice方法将其从数组中移除。

在模板中，使用v-if和v-else指令根据购物车是否为空来显示不同的内容。使用v-for指令遍历cartItems数组，显示购物车中的商品列表。每个商品后面有一个“移除”按钮，点击按钮会调用removeItem方法来移除该商品。

在添加商品部分，使用v-model指令将selectedItem与选择框的值进行双向绑定。使用v-for指令遍历availableItems数组，显示可供选择的商品列表。点击“添加到购物车”按钮会调用addItem方法将选择的商品添加到购物车中。