在 Vue 中检查复选框是否被选中。

如何在Vue中检查复选框表单是否选中，你可能会这样做：

• 创建一个布尔状态变量来存储复选框的是否选中。
• 使用 v-model 在复选框是否选中的值和状态变量之间建立双向绑定。
• 如果复选框被选中，状态变量将为真。否则，它将是假的。

示例代码如下：

<template>
  <div id="app">
    <input
      type="checkbox"
      v-model="agreement"
      name="agreement"
    />

    <label for="agreement">
      I agree to the terms and conditions
    </label>
    <br /><br />
    <button :disabled="!agreement">Continue</button>
  </div>
</template>

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

复选框对象的 checked 属性表示复选框是否被选中。

每次选中或取消选中复选框时，agreement 状态变量将分别自动更新为 true 或 false。

我们将按钮的 disabled 属性设置为协议的否定，以分别在 agreement 变量为 true 和 false 时禁用和启用它。

使用 ref 检查复选框是否被选中

在大多数情况下，v-model 足以检查是否在 Vue 中选中了复选框。但是，我们也可以使用 ref 属性来获取输入值。我们可以在任何 DOM 元素上设置此属性，并使用 Vue 实例的 $refs 属性来访问表示该元素的对象。

示例代码如下：

<template>
  <div id="app">
    <!--  Set "ref" prop to create new ref -->
    <input
      type="checkbox"
      name="js"
      ref="theCheckbox"
    />

    <label for="js"> JavaScript </label>
    <br />
    <button @click="handleClick">Done</button>
    <p v-if="message">{{ message }}</p>
  </div>
</template>

<script>
export default {
  data() {
    return { message: '' };
  },
  methods: {
    handleClick() {
      //  Access ref with "$refs" property
      if (this.$refs.theCheckbox.checked) {
        this.message = 'You know JS';
      } else {
        this.message = "You don't know JS";
      }
    },
  },
};
</script>

我们在按钮上设置了一个 onClick 侦听器。在此侦听器中，我们使用 ref 访问复选框对象，并使用其 checked 属性确定单击按钮时应向用户显示的消息。

总结

vue 中的 ref 属性是 Vue 提供的一种方便访问 DOM 节点或组件实例的方式。

使用时，你需要注意：

• ref 属性不是响应式的，所以不能通过更改 ref 属性的值来更改组件的状态。
• 只有在组件已经渲染完成后，才可以访问到 ref 引用的 DOM 节点。

与数据状态的区别：

• ref 属性用于直接访问 DOM 元素或组件实例，而数据状态用于保存组件的状态信息。
• ref 属性不会影响组件的响应式行为，而数据状态变化将触发组件的重新渲染。

你可以在这些情况下使用 ref：

1. 获取 DOM 元素或组件实例：例如，在需要操作 DOM 元素样式或属性时，可以使用 ref 访问该元素。
2. 访问子组件实例：例如，需要调用子组件实例的方法或访问子组件实例的属性时，可以使用 ref 访问该子组件实例。
3. 直接操作某些不能通过数据状态控制的元素：例如，某些 DOM 元素的某些属性或行为不能通过数据状态直接控制，此时可以使用 ref 访问该元素，并直接操作该元素。

结束

今天的介绍就到这里，希望今天的分享对你有所帮助，感谢你的阅读，如果你喜欢我的分享，别忘了点赞转发，让更多的人看到，最后别忘记点个关注，你的支持将是我分享最大的动力，后续我会持续输出更多内容，敬请期待。

https://medium.com/javascript-in-plain-english/vue-check-if-checkbox-is-checked-c1a088f32737

作者：Coding Beauty

非直接翻译，有自行改编和添加部分，翻译水平有限，难免有疏漏，欢迎指正