当前位置：首页 > VUE

vue 复选框实现

2026-01-21 15:13:30VUE

实现基础复选框

在 Vue 中实现复选框可以通过 v-model 绑定到数据属性。创建一个布尔值数据属性用于存储复选框的状态：

<template>
  <div>
    <input type="checkbox" id="checkbox" v-model="checked">
    <label for="checkbox">{{ checked ? 'Checked' : 'Unchecked' }}</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">Apple</label>
    <input type="checkbox" id="banana" value="Banana" v-model="fruits">
    <label for="banana">Banana</label>
    <input type="checkbox" id="orange" value="Orange" v-model="fruits">
    <label for="orange">Orange</label>
    <p>Selected fruits: {{ fruits }}</p>
  </div>
</template>

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

自定义复选框组件

创建一个可复用的自定义复选框组件：

<template>
  <label class="custom-checkbox">
    <input type="checkbox" v-model="internalValue" @change="handleChange">
    <span class="checkmark"></span>
    {{ label }}
  </label>
</template>

<script>
export default {
  props: {
    value: Boolean,
    label: String
  },
  data() {
    return {
      internalValue: this.value
    }
  },
  watch: {
    value(newVal) {
      this.internalValue = newVal
    }
  },
  methods: {
    handleChange() {
      this.$emit('input', this.internalValue)
    }
  }
}
</script>

<style>
.custom-checkbox {
  display: inline-block;
  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:hover input ~ .checkmark {
  background-color: #ccc;
}
.custom-checkbox input:checked ~ .checkmark {
  background-color: #2196F3;
}
</style>

使用第三方组件库

对于更复杂的复选框需求，可以使用 UI 组件库如 Element UI 或 Vuetify：

Element UI 示例：

<template>
  <el-checkbox v-model="checked">Option</el-checkbox>
</template>

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

Vuetify 示例：

<template>
  <v-checkbox v-model="checked" label="Option"></v-checkbox>
</template>

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

处理复选框组验证

在表单中使用复选框时，可以结合 Vue 的表单验证库如 VeeValidate：

vue 复选框实现

<template>
  <div>
    <input 
      type="checkbox" 
      v-model="terms" 
      v-validate="'required'" 
      name="terms"
    >
    <label>I agree to the terms</label>
    <span v-show="errors.has('terms')">{{ errors.first('terms') }}</span>
  </div>
</template>

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