当前位置：首页 > VUE

vue复选框实现

2026-02-21 15:14:19VUE

Vue 复选框实现方法

基础实现

使用 v-model 双向绑定到布尔值，适用于单个复选框：

<template>
  <input type="checkbox" v-model="isChecked" />
  <label>{{ isChecked ? '已选中' : '未选中' }}</label>
</template>

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

多选框组

绑定到数组实现多选功能：

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

<script>
export default {
  data() {
    return {
      options: [
        { value: 'vue', label: 'Vue' },
        { value: 'react', label: 'React' },
        { value: 'angular', label: 'Angular' }
      ],
      selectedOptions: []
    }
  }
}
</script>

自定义样式

通过隐藏原生输入框，用 CSS 自定义样式：

<template>
  <label class="custom-checkbox">
    <input type="checkbox" v-model="checked" />
    <span class="checkmark"></span>
    自定义样式复选框
  </label>
</template>

<style>
.custom-checkbox {
  position: relative;
  padding-left: 25px;
  cursor: pointer;
}
.custom-checkbox input {
  position: absolute;
  opacity: 0;
}
.checkmark {
  position: absolute;
  top: 0;
  left: 0;
  height: 18px;
  width: 18px;
  background-color: #eee;
}
.custom-checkbox input:checked ~ .checkmark {
  background-color: #2196F3;
}
.checkmark:after {
  content: "";
  position: absolute;
  display: none;
}
.custom-checkbox input:checked ~ .checkmark:after {
  display: block;
}
</style>

表单验证

配合 Vue 的表单验证库如 VeeValidate：

<template>
  <ValidationProvider rules="required" v-slot="{ errors }">
    <input type="checkbox" v-model="acceptedTerms" />
    <span>同意条款</span>
    <span class="error">{{ errors[0] }}</span>
  </ValidationProvider>
</template>

动态禁用状态

根据条件禁用复选框：

vue复选框实现

<template>
  <input 
    type="checkbox" 
    v-model="isActive" 
    :disabled="isDisabled"
  />
</template>

<script>
export default {
  data() {
    return {
      isActive: false,
      isDisabled: true
    }
  }
}
</script>