当前位置：首页 > VUE

vue实现复选

2026-01-07 19:28:15VUE

Vue 实现复选框

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

单个复选框

单个复选框通常用于表示一个布尔值，选中时为 true，未选中时为 false。

<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="apple" v-model="fruits" />
    <label for="apple">苹果</label>

    <input type="checkbox" id="banana" value="banana" v-model="fruits" />
    <label for="banana">香蕉</label>

    <input type="checkbox" id="orange" value="orange" v-model="fruits" />
    <label for="orange">橙子</label>

    <p>选中的水果: {{ fruits }}</p>
  </div>
</template>

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

动态生成复选框

可以通过 v-for 动态生成复选框，适用于选项较多的情况。

<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>
    <custom-checkbox v-model="checked" label="自定义复选框" />
    <p>状态: {{ checked ? '选中' : '未选中' }}</p>
  </div>
</template>

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

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

自定义组件 CustomCheckbox.vue 的实现：

<template>
  <div>
    <input type="checkbox" :id="id" v-model="internalValue" />
    <label :for="id">{{ label }}</label>
  </div>
</template>

<script>
export default {
  model: {
    prop: 'checked',
    event: 'change'
  },
  props: {
    checked: {
      type: Boolean,
      default: false
    },
    label: {
      type: String,
      default: ''
    }
  },
  data() {
    return {
      id: `checkbox-${Math.random().toString(36).substr(2, 9)}`
    }
  },
  computed: {
    internalValue: {
      get() {
        return this.checked
      },
      set(value) {
        this.$emit('change', value)
      }
    }
  }
}
</script>

使用第三方 UI 库

如果项目中使用第三方 UI 库（如 Element UI、Vuetify 等），可以直接使用其提供的复选框组件。

以 Element UI 为例：

<template>
  <div>
    <el-checkbox v-model="checked">复选框</el-checkbox>
    <p>状态: {{ checked ? '选中' : '未选中' }}</p>
  </div>
</template>

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

以上方法涵盖了 Vue 中实现复选框的常见场景，可以根据实际需求选择合适的方式。

vue实现复选