vue实现复选

2026-02-10 04:02:09VUE

Vue 实现复选

在 Vue 中实现复选功能可以通过多种方式完成，以下介绍两种常见方法：使用原生 <input type="checkbox"> 和使用 Vue 组件库（如 Element UI 或 Vuetify）。

使用原生 `<input type="checkbox">`

通过 v-model 绑定复选框的状态，可以轻松实现复选功能。

<template>
  <div>
    <label>
      <input type="checkbox" v-model="checked" />
      选择我
    </label>
    <p>当前状态: {{ checked ? '已选中' : '未选中' }}</p>
  </div>
</template>

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

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

Element UI 提供了 <el-checkbox> 组件，可以更方便地实现复选功能。

<template>
  <div>
    <el-checkbox v-model="checked">选择我</el-checkbox>
    <p>当前状态: {{ checked ? '已选中' : '未选中' }}</p>
  </div>
</template>

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

实现多选框组

如果需要实现多选框组，可以通过绑定数组来管理选中的值。

<template>
  <div>
    <el-checkbox-group v-model="selectedOptions">
      <el-checkbox label="选项1"></el-checkbox>
      <el-checkbox label="选项2"></el-checkbox>
      <el-checkbox label="选项3"></el-checkbox>
    </el-checkbox-group>
    <p>已选中的选项: {{ selectedOptions }}</p>
  </div>
</template>

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

自定义复选框样式

如果需要自定义复选框的样式，可以通过 CSS 和隐藏原生复选框来实现。

vue实现复选

<template>
  <div>
    <label class="custom-checkbox">
      <input type="checkbox" v-model="checked" class="hidden-checkbox" />
      <span class="checkbox-icon"></span>
      选择我
    </label>
  </div>
</template>

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

<style>
.hidden-checkbox {
  position: absolute;
  opacity: 0;
}

.checkbox-icon {
  display: inline-block;
  width: 16px;
  height: 16px;
  border: 1px solid #ccc;
  margin-right: 8px;
  background-color: white;
}

.hidden-checkbox:checked + .checkbox-icon {
  background-color: #409eff;
  border-color: #409eff;
}
</style>

以上方法可以根据实际需求选择使用，原生方式适合简单场景，而组件库提供了更多功能和样式定制选项。