当前位置：首页 > VUE

vue实现checkbox选取

2026-01-16 06:10:46VUE

Vue 实现 Checkbox 选取

在 Vue 中实现 Checkbox 的选取功能可以通过 v-model 双向绑定数据，结合数组或布尔值来管理选中状态。以下是几种常见实现方式：

单个 Checkbox 绑定布尔值

适用于单个复选框的场景，绑定一个布尔值表示选中状态。

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

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

多个 Checkbox 绑定数组

适用于多个复选框的场景，绑定一个数组来存储选中的值。

<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>

动态生成 Checkbox 列表

适用于动态渲染复选框的场景，通常结合 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: '选项A' },
        { value: 'opt2', label: '选项B' },
        { value: 'opt3', label: '选项C' }
      ],
      selectedOptions: []
    };
  }
};
</script>

全选与反选功能

通过计算属性或方法实现全选/反选逻辑。

vue实现checkbox选取

<template>
  <div>
    <input type="checkbox" id="selectAll" v-model="allSelected" @change="toggleAll" />
    <label for="selectAll">全选</label>
    <div v-for="item in items" :key="item.id">
      <input type="checkbox" :id="item.id" :value="item.id" v-model="selectedItems" />
      <label :for="item.id">{{ item.name }}</label>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      items: [
        { id: 1, name: '项目1' },
        { id: 2, name: '项目2' },
        { id: 3, name: '项目3' }
      ],
      selectedItems: []
    };
  },
  computed: {
    allSelected: {
      get() {
        return this.selectedItems.length === this.items.length;
      },
      set(value) {
        this.selectedItems = value ? this.items.map(item => item.id) : [];
      }
    }
  },
  methods: {
    toggleAll() {
      this.allSelected = !this.allSelected;
    }
  }
};
</script>