Vue.js 复选框

简介

在 Vue.js 中，复选框是一种能够让用户从多个选项中选择一个或多个选项的表单控件。复选框能够实现单选效果，并且可以自定义样式。

基础使用

在 Vue.js 中，复选框通常可以使用 v-model 指令实现数据的双向绑定，以便在用户进行选择操作时更新数据：

<template>
  <div>
    <input type="checkbox" id="option-1" value="1" v-model="selectedOptions">
    <label for="option-1">选项 1</label>
    <input type="checkbox" id="option-2" value="2" v-model="selectedOptions">
    <label for="option-2">选项 2</label>
    <input type="checkbox" id="option-3" value="3" v-model="selectedOptions">
    <label for="option-3">选项 3</label>
    <p>已选择的选项: {{ selectedOptions }}</p>
  </div>
</template>

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

上面的代码展示了一个最基本的复选框组件，其中通过 v-model 指令将 selectedOptions 数据双向绑定到选项复选框上。被选中的选项的值会实时更新到 selectedOptions 数组中。

自定义样式

如果想要自定义复选框的显示样式，可以使用 CSS 代码对复选框元素进行样式调整。Vue.js 还提供了 checkbox 组件，可以直接使用该组件实现更强大的样式控制。

<template>
  <div class="checkbox-group">
    <checkbox
      v-for="option in options"
      :key="option.value"
      v-model="selectedOptions"
      :label="option.label"
      :value="option.value"
      :disabled="option.disabled"
    />
  </div>
  <p>已选择的选项: {{ selectedOptions }}</p>
</template>

<script>
import Checkbox from "@/components/Checkbox.vue";

export default {
  components: {
    Checkbox,
  },
  data() {
    return {
      options: [
        { label: "选项 1", value: 1 },
        { label: "选项 2", value: 2 },
        { label: "选项 3", value: 3 },
      ],
      selectedOptions: [],
    };
  },
};
</script>

<style>
.checkbox-group {
  display: flex;
  flex-direction: column;
  margin-bottom: 12px;
}

.checkbox-group .checkbox {
  margin-bottom: 6px;
}

.checkbox-group .checkbox input {
  margin-right: 6px;
}

/* 定制样式 */
.checkbox-group .checkbox input[type="checkbox"] {
  appearance: none;
  width: 16px;
  height: 16px;
  border: 2px solid #ccc;
  border-radius: 3px;
  background-color: #fff;
  transition: border-color 0.2s ease, background-color 0.2s ease;
}

.checkbox-group .checkbox input[type="checkbox"]:checked {
  background-color: #2db7f5;
  border-color: #2db7f5;
}

.checkbox-group .checkbox input[type="checkbox"]:disabled {
  opacity: 0.5;
}
</style>

上面的代码中，我们定义了一个 Checkbox 组件，并通过 v-for 指令渲染了多个复选框。通过传递不同的 label、value 和 disabled 属性，可以渲染出不同的复选框。同时，我们也可以在样式中通过 appearance 和伪类来修改复选框的默认样式，调整复选框的边框、背景色等。

结语

Vue.js 复选框提供了丰富的功能和自定义样式选项。掌握 Vue.js 复选框的基本用法和样式控制，能够为开发人员提高开发效率，减少开发难度。