vue3取消选中时，价格减少

在Vue 3中，如果你想要在取消选中某个选项时减少价格，可以通过数据绑定和事件处理来实现。通常，这可以通过监听一个复选框（checkbox）的change事件来完成。当用户取消选中复选框时，你可以在事件处理函数中修改价格数据。

以下是一个简单的实现示例：

1. 在模板中定义一个复选框，并绑定一个变量来控制选中状态。
2. 在Vue组件的methods中定义一个方法，用来处理价格的减少逻辑。
3. 在复选框上使用v-model指令进行双向数据绑定，将复选框的选中状态与组件内的数据关联起来。
4. 当复选框状态发生变化时，通过事件处理函数来更新价格数据。

<template>
  <div>
    <input type="checkbox" v-model="isChecked" @change="handlePriceChange">
    <span>选中复选框会增加价格，取消选中会减少价格</span>
    <p>当前价格: {{ price }}</p>
  </div>
</template>

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

export default {
  setup() {
    const isChecked = ref(false);
    const price = ref(100);

    const handlePriceChange = () => {
      if (!isChecked.value) {
        // 假设每次减少的价格是10
        price.value -= 10;
      }
    };

    return {
      isChecked,
      price,
      handlePriceChange
    };
  }
};
</script>

在这个示例中，`price` 是一个响应式引用，初始值设为100。当复选框被取消选中时，`handlePriceChange` 方法会被调用，执行价格减少的操作。