vue实现checkbox

2026-01-08 02:31:09VUE

Vue 实现 Checkbox

在 Vue 中实现 Checkbox 可以通过原生 HTML 的 <input type="checkbox"> 或使用 Vue 的 v-model 指令绑定数据。以下是几种常见的实现方式：

原生 HTML Checkbox 绑定

使用原生 HTML 的 Checkbox，并通过 v-model 绑定数据：

<template>
  <div>
    <input type="checkbox" id="checkbox" v-model="isChecked" />
    <label for="checkbox">Checkbox</label>
    <p>Checked: {{ isChecked }}</p>
  </div>
</template>

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

动态 Checkbox 列表

如果需要动态生成多个 Checkbox，可以结合 v-for 和数组绑定：

vue实现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: 'option1', label: 'Option 1' },
        { id: 'opt2', value: 'option2', label: 'Option 2' },
        { id: 'opt3', value: 'option3', 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,
    },
  },
  emits: ['change'],
};
</script>

使用时：

vue实现checkbox

<template>
  <div>
    <CustomCheckbox
      id="custom-checkbox"
      label="Custom Checkbox"
      :checked="isCustomChecked"
      @change="isCustomChecked = $event"
    />
    <p>Checked: {{ isCustomChecked }}</p>
  </div>
</template>

<script>
import CustomCheckbox from './CustomCheckbox.vue';

export default {
  components: {
    CustomCheckbox,
  },
  data() {
    return {
      isCustomChecked: false,
    };
  },
};
</script>

使用第三方 UI 库

许多 Vue UI 库（如 Element UI、Vuetify、Ant Design Vue）提供了更丰富的 Checkbox 组件。以 Element UI 为例：

<template>
  <div>
    <el-checkbox v-model="checked">Checkbox</el-checkbox>
    <p>Checked: {{ checked }}</p>
  </div>
</template>

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

样式自定义

可以通过 CSS 美化 Checkbox，例如隐藏原生样式并使用自定义图标：

<template>
  <div class="custom-checkbox">
    <input
      type="checkbox"
      id="styled-checkbox"
      v-model="isStyledChecked"
      class="styled-checkbox"
    />
    <label for="styled-checkbox">Styled Checkbox</label>
  </div>
</template>

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

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

.styled-checkbox + label {
  position: relative;
  padding-left: 25px;
  cursor: pointer;
}

.styled-checkbox + label:before {
  content: '';
  position: absolute;
  left: 0;
  top: 0;
  width: 18px;
  height: 18px;
  border: 2px solid #ccc;
  border-radius: 3px;
}

.styled-checkbox:checked + label:before {
  background-color: #42b983;
  border-color: #42b983;
}

.styled-checkbox:checked + label:after {
  content: '✓';
  position: absolute;
  left: 5px;
  top: 2px;
  color: white;
}
</style>

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