做一个的vue3购物车计算总价，包含选中和未选中状态

在Vue 3中实现一个购物车功能，包括计算总价以及处理商品的选中和未选中状态，可以通过以下步骤来完成：

1. 创建一个Vue项目：首先确保你已经安装了Node.js和npm，然后可以使用Vue CLI创建一个新的Vue 3项目。

2. 定义商品数据结构：定义一个商品对象，包含商品的基本信息和状态（是否被选中）。

3. 创建购物车组件：编写一个购物车组件，其中包含商品列表和总价的显示。

4. 计算总价逻辑：在组件中实现一个方法来计算所有选中商品的总价。

5. 处理选中状态：为每个商品添加一个选中状态，并提供切换选中状态的功能。

6. 双向数据绑定：使用Vue的v-model指令或.sync修饰符来实现商品选中状态的双向绑定。

下面是一个简化的例子：

<template>
  <div>
    <div v-for="item in products" :key="item.id">
      <input type="checkbox" :value="item.id" v-model="selectedItems" @change="updateTotalPrice">
      <span>{{ item.name }} - ￥{{ item.price }}</span>
    </div>
    <p>选中的商品总价：￥{{ totalPrice }}</p>
  </div>
</template>

<script setup>
import { reactive } from 'vue';

const products = reactive([
  { id: 1, name: '商品A', price: 100, selected: false },
  { id: 2, name: '商品B', price: 200, selected: false },
  // 更多商品...
]);

const selectedItems = [];
const totalPrice = computed(() => {
  return products.reduce((total, item) => {
    if (item.selected) {
      return total + item.price;
    }
    return total;
  }, 0);
});

const updateTotalPrice = () => {
  // 当选中状态改变时，总价会自动更新，因为它是基于selectedItems的计算属性
};
</script>

<style>
/* 样式代码 */
</style>

在这个例子中，每个商品都有一个`selected`状态来表示是否被选中。当用户通过复选框改变选中状态时，`updateTotalPrice`函数会被调用，然后总价会根据`selectedItems`数组中的选中商品重新计算。