当前位置：首页 > VUE

vue实现checkbox

2026-02-10 15:06:40VUE

Vue 实现 Checkbox 的基本方法

在 Vue 中实现 Checkbox 可以通过 v-model 进行双向数据绑定，结合 input 元素的 type="checkbox" 属性。

<template>
  <div>
    <input type="checkbox" v-model="isChecked" />
    <label>{{ isChecked ? 'Checked' : 'Unchecked' }}</label>
  </div>
</template>

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

处理多个 Checkbox

当需要处理多个 Checkbox 时，可以将 v-model 绑定到一个数组上，每个 Checkbox 的 value 属性决定选中时的值。

<template>
  <div>
    <input type="checkbox" v-model="selectedFruits" value="apple" />
    <label>Apple</label>
    <input type="checkbox" v-model="selectedFruits" value="banana" />
    <label>Banana</label>
    <input type="checkbox" v-model="selectedFruits" value="orange" />
    <label>Orange</label>
    <p>Selected fruits: {{ selectedFruits }}</p>
  </div>
</template>

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

自定义 Checkbox 样式

可以通过隐藏原生 Checkbox 并自定义样式来实现更美观的 UI。通常结合 label 和 CSS 伪类实现。

<template>
  <div>
    <input type="checkbox" v-model="isChecked" id="custom-checkbox" />
    <label for="custom-checkbox" class="custom-checkbox-label">
      {{ isChecked ? 'Checked' : 'Unchecked' }}
    </label>
  </div>
</template>

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

<style>
input[type="checkbox"] {
  display: none;
}

.custom-checkbox-label {
  display: inline-block;
  padding: 8px 16px;
  background: #eee;
  border-radius: 4px;
  cursor: pointer;
}

input[type="checkbox"]:checked + .custom-checkbox-label {
  background: #4CAF50;
  color: white;
}
</style>

使用第三方组件库

如果需要更丰富的功能或样式，可以集成第三方组件库，如 Element UI、Vuetify 或 Ant Design Vue。

以 Element UI 为例：

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

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

动态生成 Checkbox 列表

当 Checkbox 选项需要从后端或动态数据生成时，可以使用 v-for 指令。

vue实现checkbox

<template>
  <div>
    <div v-for="fruit in fruits" :key="fruit.value">
      <input type="checkbox" v-model="selectedFruits" :value="fruit.value" />
      <label>{{ fruit.label }}</label>
    </div>
    <p>Selected: {{ selectedFruits }}</p>
  </div>
</template>

<script>
export default {
  data() {
    return {
      fruits: [
        { value: 'apple', label: 'Apple' },
        { value: 'banana', label: 'Banana' },
        { value: 'orange', label: 'Orange' }
      ],
      selectedFruits: []
    }
  }
}
</script>