当前位置：首页 > VUE

vue实现checkbox选取

2026-02-17 07:19:06VUE

Vue 实现 Checkbox 选取

在 Vue 中实现 Checkbox 的选取功能可以通过多种方式完成，以下是一些常见的方法：

使用 v-model 绑定单个 Checkbox

通过 v-model 可以轻松实现单个 Checkbox 的选中状态绑定：

<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 绑定多个 Checkbox

对于多个 Checkbox，可以将 v-model 绑定到一个数组：

<template>
  <div>
    <input type="checkbox" id="option1" value="Option 1" v-model="selectedOptions" />
    <label for="option1">Option 1</label>

    <input type="checkbox" id="option2" value="Option 2" v-model="selectedOptions" />
    <label for="option2">Option 2</label>

    <input type="checkbox" id="option3" value="Option 3" v-model="selectedOptions" />
    <label for="option3">Option 3</label>

    <p>Selected options: {{ selectedOptions }}</p>
  </div>
</template>

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

动态生成 Checkbox 列表

可以通过 v-for 动态生成 Checkbox 列表：

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

<script>
export default {
  data() {
    return {
      options: [
        { id: 'opt1', value: 'Value 1', label: 'Option 1' },
        { id: 'opt2', value: 'Value 2', label: 'Option 2' },
        { id: 'opt3', value: 'Value 3', label: 'Option 3' }
      ],
      selectedOptions: []
    }
  }
}
</script>

自定义 Checkbox 组件

可以创建一个可复用的 Checkbox 组件：

<template>
  <div>
    <input type="checkbox" :id="id" :checked="checked" @change="$emit('change', $event.target.checked)" />
    <label :for="id">{{ label }}</label>
  </div>
</template>

<script>
export default {
  props: {
    id: {
      type: String,
      required: true
    },
    label: {
      type: String,
      required: true
    },
    checked: {
      type: Boolean,
      default: false
    }
  }
}
</script>

使用第三方 UI 库

许多 Vue UI 库提供了更丰富的 Checkbox 组件，例如 Element UI、Vuetify 等：

vue实现checkbox选取

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

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

这些方法涵盖了从基础到高级的 Checkbox 实现方式，可以根据具体需求选择合适的方法。