ve3双向数据绑定功能实现简单水果购物车

Ve3是一个轻量级的前端框架，用于简化前端开发。实现一个简单的双向数据绑定水果购物车功能，我们可以利用Ve3的数据驱动特性。以下是基本步骤：

1. **创建组件**: 创建一个名为`FruitCart`的组件，包含商品列表和总价属性。

<template>
  <div class="fruit-cart">
    <ul>
      <li v-for="(fruit, index) in fruits" :key="index">
        {{ fruit.name }} - {{ fruit.price }}
        <button @click="removeFruit(index)">删除</button>
      </li>
    </ul>
    <p>总价：{{ totalPrice }}</p>
  </div>
</template>

<script setup>
import { ref } from 've3';
const fruits = ref([{ name: '苹果', price: 5 }, { name: '香蕉', price: 3 }]);
let totalPrice = computed(() => fruits.value.reduce((total, fruit) => total + fruit.price, 0));
function removeFruit(index) {
  fruits.value.splice(index, 1);
}
</script>

2. **双向数据绑定**：`fruits`数组和`totalPrice`计算属性会实时同步，当你添加或删除水果时，购物车的价格会自动更新。

3. **事件监听**: 使用`@click`绑定了删除按钮的点击事件，当用户点击删除按钮时，通过索引从`fruits`数组中移除元素。