vue 复选框实现

2026-02-22 06:35:44VUE

Vue 复选框实现方法

在 Vue 中实现复选框功能可以通过 v-model 双向绑定数据，结合原生 HTML 的 <input type="checkbox"> 或使用组件库（如 Element UI、Vant 等）。以下是几种常见实现方式：

单个复选框

绑定一个布尔值，用于表示复选框的选中状态：

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

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

多个复选框（数组绑定）

当需要处理多个复选框时，v-model 可以绑定到一个数组，存储选中的值：

<template>
  <div>
    <input type="checkbox" id="apple" value="apple" v-model="selectedFruits">
    <label for="apple">苹果</label>
    <input type="checkbox" id="banana" value="banana" v-model="selectedFruits">
    <label for="banana">香蕉</label>
    <input type="checkbox" id="orange" value="orange" v-model="selectedFruits">
    <label for="orange">橙子</label>
    <p>选中的水果：{{ selectedFruits }}</p>
  </div>
</template>

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

使用组件库（以 Element UI 为例）

若使用 Element UI，可以通过 <el-checkbox> 快速实现：

<template>
  <div>
    <el-checkbox v-model="checked">选项</el-checkbox>
    <el-checkbox-group v-model="selectedList">
      <el-checkbox label="option1">选项1</el-checkbox>
      <el-checkbox label="option2">选项2</el-checkbox>
    </el-checkbox-group>
  </div>
</template>

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

动态渲染复选框

通过 v-for 动态生成复选框选项：

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

<script>
export default {
  data() {
    return {
      options: [
        { value: 'a', label: '选项A' },
        { value: 'b', label: '选项B' }
      ],
      selectedItems: []
    }
  }
}
</script>