在 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：

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

结束

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

https://medium.com/javascript-in-plain-english/vue-check-if-checkbox-is-checked-c1a088f32737
作者：Coding Beauty
非直接翻译，有自行改编和添加部分，翻译水平有限，难免有疏漏，欢迎指正

前军教程网

中小站长与DIV+CSS网页布局开发技术人员的首选CSS学习平台

Vue小知识，如何检查复选框是否选中

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

总结

结束