在 Vue 中设置复选框功能

Vue 2月前 219

在 Vue 中，复选框是一种非常常见的交互组件，它可以让用户选择多个选项。本文将介绍如何在 Vue 中设置复选框功能，并提供一些实际示例。

使用 v-model 指令

Vue 中的 v-model 指令可以实现双向数据绑定，从而实现复选框的选择状态与数据模型的同步。例如，我们可以这样定义一个复选框组件：

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

<script>
export default {
  props: {
    label: String,
    value: Boolean,
  },
  data() {
    return {
      checked: this.value,
    };
  },
  watch: {
    checked(newVal) {
      this.$emit("input", newVal);
    },
  },
};
</script>

在这个组件中，我们使用 v-model 指令绑定了 checked 属性，同时在 data 中初始化了 checked 的值。当用户点击复选框时，checked 的值会自动更新，从而触发 watch 中的回调函数，将最新的值通过 $emit 方法传递给父组件。

在使用这个复选框组件时，我们可以这样写：

<template>
  <div>
    <checkbox v-model="checked" label="选项1" />
    <checkbox v-model="checked" label="选项2" />
    <checkbox v-model="checked" label="选项3" />
  </div>
</template>

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

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

在这个父组件中，我们使用了三个复选框组件，并将它们的 v-model 绑定到同一个数组 checked 上。这个数组中的每个元素分别与一个复选框对应，当用户选择一个复选框时，checked 数组中对应的元素会自动更新。

使用 v-bind 绑定 checked 属性

除了使用 v-model 指令，我们还可以使用 v-bind 指令绑定 checked 属性，从而实现复选框的选择状态与数据模型的同步。例如，我们可以这样定义一个复选框组件：

<template>
  <div>
    <label>
      <input type="checkbox" v-bind:checked="checked" v-on:change="handleChange" />
      {{ label }}
    </label>
  </div>
</template>

<script>
export default {
  props: {
    label: String,
    value: Boolean,
  },
  data() {
    return {
      checked: this.value,
    };
  },
  methods: {
    handleChange(event) {
      this.checked = event.target.checked;
      this.$emit("input", this.checked);
    },
  },
};
</script>

在这个组件中，我们使用 v-bind 指令绑定了 checked 属性，同时在 data 中初始化了 checked 的值。当用户点击复选框时，会触发 change 事件，从而调用 handleChange 方法，将最新的值通过 $emit 方法传递给父组件。

在使用这个复选框组件时，我们可以这样写：

<template>
  <div>
    <checkbox v-bind:checked="checked[0]" v-on:input="checked[0] = $event.target.checked" label="选项1" />
    <checkbox v-bind:checked="checked[1]" v-on:input="checked[1] = $event.target.checked" label="选项2" />
    <checkbox v-bind:checked="checked[2]" v-on:input="checked[2] = $event.target.checked" label="选项3" />
  </div>
</template>

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

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