当前位置：首页 > VUE

vue实现勾选框

2026-03-29 19:17:47VUE

Vue 实现勾选框的方法

使用 `v-model` 双向绑定

Vue 提供了 v-model 指令，可以轻松实现勾选框的双向绑定。以下是一个基础示例：

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

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

处理多个勾选框

如果需要处理多个勾选框，可以将 v-model 绑定到一个数组：

vue实现勾选框

<template>
  <div>
    <input type="checkbox" v-model="selectedOptions" value="option1" />
    <label>选项1</label>
    <input type="checkbox" v-model="selectedOptions" value="option2" />
    <label>选项2</label>
    <input type="checkbox" v-model="selectedOptions" value="option3" />
    <label>选项3</label>
    <p>已选选项：{{ selectedOptions }}</p>
  </div>
</template>

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

自定义勾选框组件

可以封装一个自定义勾选框组件，增强复用性：

vue实现勾选框

<template>
  <label>
    <input type="checkbox" v-model="internalValue" />
    {{ label }}
  </label>
</template>

<script>
export default {
  props: {
    value: Boolean,
    label: String
  },
  computed: {
    internalValue: {
      get() {
        return this.value;
      },
      set(newValue) {
        this.$emit('input', newValue);
      }
    }
  }
};
</script>

使用第三方 UI 库

若项目中使用 UI 库（如 Element UI、Vuetify），可以直接调用其提供的勾选框组件：

<!-- Element UI 示例 -->
<template>
  <el-checkbox v-model="checked">备选项</el-checkbox>
</template>

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

动态渲染勾选框

结合 v-for 动态生成勾选框列表：

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

<script>
export default {
  data() {
    return {
      options: [
        { id: 1, name: '选项A', checked: false },
        { id: 2, name: '选项B', checked: false }
      ]
    };
  }
};
</script>