当前位置：首页 > VUE

vue实现勾选框

2026-01-17 02:37:40VUE

Vue 实现勾选框的方法

在 Vue 中实现勾选框可以通过多种方式，以下是几种常见的实现方法。

使用 `v-model` 绑定数据

通过 v-model 可以轻松实现双向数据绑定，适用于单个勾选框或一组勾选框。

vue实现勾选框

<template>
  <div>
    <input type="checkbox" v-model="isChecked" id="checkbox1">
    <label for="checkbox1">勾选我</label>
    <p>当前状态: {{ isChecked }}</p>
  </div>
</template>

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

处理多个勾选框

对于多个勾选框，可以将选中的值存储在数组中。

<template>
  <div>
    <input type="checkbox" v-model="selectedOptions" value="option1" id="option1">
    <label for="option1">选项1</label>
    <input type="checkbox" v-model="selectedOptions" value="option2" id="option2">
    <label for="option2">选项2</label>
    <input type="checkbox" v-model="selectedOptions" value="option3" id="option3">
    <label for="option3">选项3</label>
    <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="isChecked">
      <span class="checkmark"></span>
      自定义样式勾选框
    </label>
  </div>
</template>

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

<style>
.custom-checkbox {
  display: block;
  position: relative;
  padding-left: 25px;
  cursor: pointer;
}

.custom-checkbox input {
  position: absolute;
  opacity: 0;
  cursor: pointer;
}

.checkmark {
  position: absolute;
  top: 0;
  left: 0;
  height: 18px;
  width: 18px;
  background-color: #eee;
  border-radius: 3px;
}

.custom-checkbox:hover input ~ .checkmark {
  background-color: #ccc;
}

.custom-checkbox input:checked ~ .checkmark {
  background-color: #2196F3;
}

.checkmark:after {
  content: "";
  position: absolute;
  display: none;
}

.custom-checkbox input:checked ~ .checkmark:after {
  display: block;
}

.custom-checkbox .checkmark:after {
  left: 6px;
  top: 2px;
  width: 5px;
  height: 10px;
  border: solid white;
  border-width: 0 2px 2px 0;
  transform: rotate(45deg);
}
</style>

使用第三方组件库

如果需要更丰富的功能，可以使用第三方组件库如 Element UI、Vuetify 等。

以 Element UI 为例：

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

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

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