当前位置：首页 > VUE

vue 实现复选框

2026-02-21 21:45:26VUE

实现复选框的基础用法

在 Vue 中实现复选框可以通过 v-model 绑定到布尔值。当复选框被选中时，绑定的值为 true，反之为 false。

<template>
  <div>
    <input type="checkbox" id="checkbox" v-model="checked">
    <label for="checkbox">勾选我</label>
    <p>当前状态: {{ checked }}</p>
  </div>
</template>

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

处理多个复选框

当需要处理多个复选框时，可以将 v-model 绑定到一个数组，数组中的元素对应选中的复选框的 value 值。

<template>
  <div>
    <input type="checkbox" id="option1" value="选项1" v-model="selectedOptions">
    <label for="option1">选项1</label>
    <input type="checkbox" id="option2" value="选项2" v-model="selectedOptions">
    <label for="option2">选项2</label>
    <input type="checkbox" id="option3" value="选项3" v-model="selectedOptions">
    <label for="option3">选项3</label>
    <p>选中的选项: {{ selectedOptions }}</p>
  </div>
</template>

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

自定义复选框样式

可以通过隐藏原生复选框并使用 CSS 自定义样式来实现更美观的复选框。

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

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

<style>
.custom-checkbox {
  display: inline-block;
  position: relative;
  padding-left: 25px;
  cursor: pointer;
}

.custom-checkbox input {
  position: absolute;
  opacity: 0;
  cursor: pointer;
}

.checkmark {
  position: absolute;
  top: 0;
  left: 0;
  height: 18px;
  width: 18px;
  background-color: #eee;
  border-radius: 3px;
}

.custom-checkbox:hover input ~ .checkmark {
  background-color: #ccc;
}

.custom-checkbox input:checked ~ .checkmark {
  background-color: #2196F3;
}

.checkmark:after {
  content: "";
  position: absolute;
  display: none;
}

.custom-checkbox input:checked ~ .checkmark:after {
  display: block;
}

.custom-checkbox .checkmark:after {
  left: 6px;
  top: 2px;
  width: 5px;
  height: 10px;
  border: solid white;
  border-width: 0 2px 2px 0;
  transform: rotate(45deg);
}
</style>

使用第三方组件库

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

以 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 的表单验证库（如 VeeValidate）时，可以对复选框进行验证。

<template>
  <div>
    <input 
      type="checkbox" 
      id="terms" 
      v-model="terms" 
      v-validate="'required'" 
      name="terms"
    >
    <label for="terms">同意条款</label>
    <span v-show="errors.has('terms')" class="error">
      {{ errors.first('terms') }}
    </span>
  </div>
</template>

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

<style>
.error {
  color: red;
}
</style>

动态生成复选框

当需要根据数据动态生成复选框时，可以使用 v-for 指令。

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

<script>
export default {
  data() {
    return {
      options: [
        { value: 'opt1', label: '选项一' },
        { value: 'opt2', label: '选项二' },
        { value: 'opt3', label: '选项三' }
      ],
      selectedOptions: []
    }
  }
}
</script>

vue 实现复选框