vue获取复选框选中的值

可以通过以下方式获取复选框选中的值：

1. 使用 `v-model` 绑定选中状态

<div id="app">
  <input type="checkbox" id="apple" value="apple" v-model="checkedFruits">
  <label for="apple">Apple</label>
  <br>
  <input type="checkbox" id="banana" value="banana" v-model="checkedFruits">
  <label for="banana">Banana</label>
  <br>
  <input type="checkbox" id="orange" value="orange" v-model="checkedFruits">
  <label for="orange">Orange</label>
  <br>
  <button @click="showCheckedFruits">Show Selected Fruits</button>
</div>

<script>
  new Vue({
    el: "#app",
    data: {
      checkedFruits: []
    },
    methods: {
      showCheckedFruits() {
        console.log(this.checkedFruits);
      }
    }
  });
</script>

在上面的例子中，我们使用 `v-model` 绑定了 `checkedFruits` 数组，当复选框选中时，Vue会自动更新数组中的值。然后，我们可以使用 `showCheckedFruits` 方法来获取选中的水果。

2. 使用 `@change` 事件监听选中状态变化

<div id="app">
  <input type="checkbox" id="apple" value="apple" @change="updateCheckedFruits($event)">
  <label for="apple">Apple</label>
  <br>
  <input type="checkbox" id="banana" value="banana" @change="updateCheckedFruits($event)">
  <label for="banana">Banana</label>
  <br>
  <input type="checkbox" id="orange" value="orange" @change="updateCheckedFruits($event)">
  <label for="orange">Orange</label>
  <br>
  <button @click="showCheckedFruits">Show Selected Fruits</button>
</div>

<script>
  new Vue({
    el: "#app",
    data: {
      checkedFruits: []
    },
    methods: {
      updateCheckedFruits(event) {
        const isChecked = event.target.checked;
        const value = event.target.value;
        if (isChecked) {
          this.checkedFruits.push(value);
        } else {
          const index = this.checkedFruits.indexOf(value);
          this.checkedFruits.splice(index, 1);
        }
      },
      showCheckedFruits() {
        console.log(this.checkedFruits);
      }
    }
  });
</script>

在上面的例子中，我们使用 `@change` 事件来监听复选框选中状态的变化。当复选框选中时，我们将其值添加到 `checkedFruits` 数组中；当复选框取消选中时，我们从数组中删除其值。然后，我们可以使用 `showCheckedFruits` 方法来获取选中的水果。