当前位置：首页 > VUE

vue 实现复选框

2026-01-21 06:16:45VUE

Vue 实现复选框的方法

在 Vue 中实现复选框可以通过 v-model 指令绑定数据，结合 input 元素的 type="checkbox" 属性来实现。以下是几种常见场景的实现方式。

单个复选框绑定布尔值

适用于单个复选框，绑定一个布尔值来控制选中状态。

vue 实现复选框

<template>
  <div>
    <input type="checkbox" id="checkbox" v-model="checked" />
    <label for="checkbox">{{ checked ? '选中' : '未选中' }}</label>
  </div>
</template>

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

多个复选框绑定数组

适用于多个复选框，绑定一个数组来存储选中的值。

<template>
  <div>
    <input type="checkbox" id="apple" value="苹果" v-model="fruits" />
    <label for="apple">苹果</label>
    <input type="checkbox" id="banana" value="香蕉" v-model="fruits" />
    <label for="banana">香蕉</label>
    <input type="checkbox" id="orange" value="橙子" v-model="fruits" />
    <label for="orange">橙子</label>
    <p>选中的水果: {{ fruits }}</p>
  </div>
</template>

<script>
export default {
  data() {
    return {
      fruits: []
    }
  }
}
</script>

动态生成复选框

适用于根据数据动态生成复选框的场景。

vue 实现复选框

<template>
  <div>
    <div v-for="fruit in fruitOptions" :key="fruit.value">
      <input type="checkbox" :id="fruit.value" :value="fruit.value" v-model="fruits" />
      <label :for="fruit.value">{{ fruit.label }}</label>
    </div>
    <p>选中的水果: {{ fruits }}</p>
  </div>
</template>

<script>
export default {
  data() {
    return {
      fruitOptions: [
        { value: 'apple', label: '苹果' },
        { value: 'banana', label: '香蕉' },
        { value: 'orange', label: '橙子' }
      ],
      fruits: []
    }
  }
}
</script>

自定义复选框组件

封装一个可复用的复选框组件。

<template>
  <div>
    <input type="checkbox" :id="id" :checked="checked" @change="$emit('change', $event.target.checked)" />
    <label :for="id">{{ label }}</label>
  </div>
</template>

<script>
export default {
  props: {
    id: {
      type: String,
      required: true
    },
    label: {
      type: String,
      required: true
    },
    checked: {
      type: Boolean,
      default: false
    }
  }
}
</script>

使用自定义组件：

<template>
  <div>
    <custom-checkbox id="custom" label="自定义复选框" :checked="isChecked" @change="handleChange" />
  </div>
</template>

<script>
import CustomCheckbox from './CustomCheckbox.vue'

export default {
  components: {
    CustomCheckbox
  },
  data() {
    return {
      isChecked: false
    }
  },
  methods: {
    handleChange(checked) {
      this.isChecked = checked
    }
  }
}
</script>