vue实现复选

2026-03-07 03:52:16VUE

Vue 实现复选的基本方法

在 Vue 中实现复选功能通常使用 <input type="checkbox"> 结合 v-model 进行数据绑定。以下是一个基础示例：

<template>
  <div>
    <input type="checkbox" id="checkbox1" v-model="checked" />
    <label for="checkbox1">选项1</label>
  </div>
</template>

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

处理多个复选框

当需要处理多个复选框时，可以将 v-model 绑定到一个数组：

vue实现复选

<template>
  <div>
    <input type="checkbox" id="option1" value="option1" v-model="checkedItems" />
    <label for="option1">选项1</label>

    <input type="checkbox" id="option2" value="option2" v-model="checkedItems" />
    <label for="option2">选项2</label>

    <input type="checkbox" id="option3" value="option3" v-model="checkedItems" />
    <label for="option3">选项3</label>
  </div>
</template>

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

使用计算属性处理复选逻辑

对于更复杂的场景，可以使用计算属性来处理复选逻辑：

<template>
  <div>
    <input 
      type="checkbox" 
      v-for="option in options" 
      :key="option.value"
      :value="option.value"
      v-model="selectedOptions"
    />
    <label>{{ option.label }}</label>
  </div>
</template>

<script>
export default {
  data() {
    return {
      options: [
        { value: 'opt1', label: '选项1' },
        { value: 'opt2', label: '选项2' },
        { value: 'opt3', label: '选项3' }
      ],
      selectedOptions: []
    }
  },
  computed: {
    isAllSelected() {
      return this.selectedOptions.length === this.options.length
    }
  }
}
</script>

自定义复选组件

可以创建可复用的复选组件：

vue实现复选

<!-- Checkbox.vue -->
<template>
  <label>
    <input 
      type="checkbox" 
      :checked="modelValue"
      @change="$emit('update:modelValue', $event.target.checked)"
    />
    {{ label }}
  </label>
</template>

<script>
export default {
  props: {
    modelValue: Boolean,
    label: String
  },
  emits: ['update:modelValue']
}
</script>

使用自定义组件：

<template>
  <div>
    <Checkbox v-model="checked1" label="选项1" />
    <Checkbox v-model="checked2" label="选项2" />
  </div>
</template>

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

export default {
  components: {
    Checkbox
  },
  data() {
    return {
      checked1: false,
      checked2: false
    }
  }
}
</script>

使用第三方库

对于更复杂的需求，可以考虑使用第三方组件库如 Element UI、Vuetify 或 Ant Design Vue 提供的复选组件：

<template>
  <!-- Element UI 示例 -->
  <el-checkbox v-model="checked">选项</el-checkbox>

  <!-- Vuetify 示例 -->
  <v-checkbox v-model="checked" label="选项"></v-checkbox>
</template>