vue3实现取消选中时价格清除

在Vue 3中实现取消选中时价格清除的功能，通常需要利用组件的响应式系统以及组件状态管理。以下是一个基本的实现思路：

1. 使用`data`函数或`ref`函数定义一个响应式的数据属性，该属性用来存储当前选中的价格。
2. 在模板中为每个可选项创建一个选择按钮或复选框，并绑定一个事件处理器来更新这个价格数据。
3. 当用户取消选中某个选项时，通过事件处理器将价格数据设置为一个初始值或空值，从而实现价格的清除。

假设我们有一个简单的场景，用户可以为某个商品选择不同的价格套餐。我们可以这样做：

<template>
  <div>
    <!-- 循环渲染价格选项 -->
    <div v-for="option in priceOptions" :key="option.id">
      <input
        type="checkbox"
        :value="option.price"
        v-model="selectedPrice"
        @change="handlePriceChange"
      />
      {{ option.label }}
    </div>
    <!-- 当没有选中价格时，显示价格清除 -->
    <p v-if="!selectedPrice">价格已清除</p>
  </div>
</template>

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

// 定义价格选项
const priceOptions = [
  { id: 1, label: '套餐A', price: 100 },
  { id: 2, label: '套餐B', price: 200 },
  { id: 3, label: '套餐C', price: 300 },
];

// 使用ref定义一个响应式数据属性来存储选中的价格
const selectedPrice = ref(null);
// 或者使用data函数定义
// data() {
//   return {
//     selectedPrice: null,
//   };
// },

// 定义一个方法来处理价格变化
const handlePriceChange = (event) => {
  selectedPrice.value = event.target.checked ? event.target.value : null;
};
</script>

在这个例子中，我们使用了Vue 3的Composition API，`ref`函数创建了一个响应式的数据属性`selectedPrice`，用来存储当前选中的价格。同时，我们为每个选项创建了一个复选框，并使用`v-model`指令将选中的价格与`selectedPrice`进行双向绑定。`@change`事件监听器会触发`handlePriceChange`方法，根据复选框的选中状态更新`selectedPrice`的值。如果用户取消选中，`selectedPrice`将被设置为`null`，同时在模板中通过条件渲染显示“价格已清除”。