Vue 如何获取 checked

在Vue开发中，获取checkbox的选中状态（checked）是一个常见的需求。这在表单验证、数据收集以及用户交互等场景中都非常有用。下面将详细介绍几种在Vue中获取checked状态的方法。

方法一：使用v-model指令

v-model指令是Vue中用于实现双向数据绑定的便捷方式。当应用在checkbox元素上时，它可以自动跟踪checkbox的选中状态。

在Vue实例的data选项中定义一个变量来存储checkbox的状态：

<template>
  <div>
    <input type="checkbox" id="checkbox" v-model="isChecked">
    <label for="checkbox">选中我</label>
    <p>当前选中状态：{{ isChecked }}</p>
  </div>
</template>

<script>
export default {
  data() {
    return {
      isChecked: false
    };
  }
};
</script>

在上述代码中，isChecked变量会随着checkbox的选中状态变化而自动更新，我们可以直接在模板中使用它来显示当前的选中状态。

方法二：监听change事件

除了使用v-model指令，我们还可以通过监听checkbox的change事件来获取其选中状态。

<template>
  <div>
    <input type="checkbox" id="checkbox" @change="handleCheckboxChange">
    <label for="checkbox">选中我</label>
    <p>当前选中状态：{{ isChecked }}</p>
  </div>
</template>

<script>
export default {
  data() {
    return {
      isChecked: false
    };
  },
  methods: {
    handleCheckboxChange(event) {
      this.isChecked = event.target.checked;
    }
  }
};
</script>

在这种方法中，当checkbox的状态发生变化时，handleCheckboxChange方法会被调用，我们可以通过event.target.checked来获取当前的选中状态，并将其赋值给isChecked变量。

总结

通过v-model指令和监听change事件这两种方法，我们可以方便地在Vue中获取checkbox的选中状态。v-model指令提供了一种简洁的双向数据绑定方式，而监听change事件则更加灵活，适用于一些复杂的业务逻辑场景。根据具体的需求，我们可以选择合适的方法来实现获取checked状态的功能。