当前位置：首页 > VUE

vue实现checkbox

2026-01-13 07:36:00VUE

Vue 实现 Checkbox 的基本方法

在 Vue 中实现 Checkbox 可以通过 v-model 直接绑定数据，结合 input 元素的 type="checkbox" 属性。以下是一个基础示例：

<template>
  <div>
    <input type="checkbox" v-model="isChecked" />
    <label>勾选状态：{{ isChecked }}</label>
  </div>
</template>

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

动态绑定多个 Checkbox

如果需要动态生成多个 Checkbox 并绑定到数组，可以通过 v-for 遍历选项，并用 v-model 绑定到数组：

vue实现checkbox

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

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

自定义 Checkbox 样式

原生 Checkbox 样式可以通过隐藏原生输入框并自定义标签样式来实现：

vue实现checkbox

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

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

<style>
.custom-checkbox {
  display: inline-flex;
  align-items: center;
  cursor: pointer;
}

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

.checkmark {
  width: 20px;
  height: 20px;
  background-color: #eee;
  margin-right: 8px;
  border-radius: 4px;
}

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

.checkmark:after {
  content: "";
  display: none;
  position: absolute;
  width: 5px;
  height: 10px;
  border: solid white;
  border-width: 0 2px 2px 0;
  transform: rotate(45deg);
}

.custom-checkbox input:checked ~ .checkmark:after {
  display: block;
}
</style>

使用第三方组件库

若需快速实现复杂功能（如全选、半选等），可以借助第三方组件库：

Element UI：el-checkbox 和 el-checkbox-group
Vuetify：v-checkbox
Ant Design Vue：a-checkbox

以 Element UI 为例：

<template>
  <div>
    <el-checkbox v-model="checked">选项</el-checkbox>
    <el-checkbox-group v-model="checkedList">
      <el-checkbox label="A"></el-checkbox>
      <el-checkbox label="B"></el-checkbox>
    </el-checkbox-group>
  </div>
</template>

<script>
export default {
  data() {
    return {
      checked: false,
      checkedList: [],
    };
  },
};
</script>