Vue.js 获取复选框组的值

概要

在 Vue.js 中获取复选框组的值，需要通过 v-model 指令绑定一个数组，然后在确认提交时，通过数组的值来获取复选框勾选的选项。

代码实现

以下是一个简单的例子，展示了如何获取复选框组的值：

HTML

<template>
  <div>
    <h3>请选择颜色：</h3>
    <label v-for="color in colors" :key="color">
      <input type="checkbox" :value="color" v-model="selectedColors">
      {{ color }}
    </label>
    <button @click="submitColors">提交</button>
  </div>
</template>

JavaScript

<script>
  export default {
    data() {
      return {
        colors: ['红色', '蓝色', '黄色'],
        selectedColors: []
      }
    },
    methods: {
      submitColors() {
        console.log('已选择颜色：', this.selectedColors)
      }
    }
  }
</script>

在这个例子中，我们使用 v-for 指令渲染了一个包含多个复选框的复选框组，然后通过 v-model 绑定了一个数组 selectedColors 来代表选中的颜色。在点击提交按钮时，我们只需要通过 this.selectedColors 来获取选中的颜色即可。

总结

使用 Vue.js 获取复选框组的值，可以通过绑定一个数组来实现。在提交时，只需要通过这个数组来获取用户选择的选项即可。