Vue.js 如何在 Vue.js 中使用 v-model 绑定复选框

在本文中，我们将介绍如何使用 Vue.js 中的 v-model 来绑定复选框。

什么是 v-model？

v-model 是 Vue.js 提供的一个双向绑定的指令，它可以轻松地将表单元素的值和 Vue.js 实例的数据进行关联。通过 v-model，我们可以在视图层和实例数据层之间建立起即时的响应式关系。

如何使用 v-model 绑定复选框？

要使用 v-model 绑定复选框，首先需要在 Vue 实例中定义一个布尔类型的变量，作为复选框的值。然后，在 HTML 模板中使用 v-model 指令将这个变量和复选框进行绑定。

下面是一个简单的示例，展示了如何使用 v-model 绑定复选框：

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

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

在上面的示例中，我们使用了一个布尔类型的变量 isChecked 来表示复选框的选中状态。通过 v-model 指令，复选框的选中状态会与 isChecked 进行双向绑定。当复选框被选中或取消选中时，isChecked 的值也会相应的改变。可以通过插值表达式 {{ isChecked }} 在 HTML 模板中即时显示选中状态。

复选框的初始值

如果在 Vue 实例的数据中为 isChecked 变量设置了初始值，那么复选框在渲染时将会根据这个值进行默认选中或者取消选中的操作。例如，我们将 isChecked 的初始值设置为 true：

data() {
  return {
    isChecked: true
  }
}

那么在页面渲染后，isChecked 为 true，复选框则会被默认选中。

多个复选框的绑定

当需要绑定多个复选框的选中状态时，可以使用一个数组来存储多个选项的值。每个复选框的选中状态可以通过 v-model 绑定到数组中相应的元素。

下面是一个示例，展示如何绑定多个复选框：

<template>
  <div>
    <div v-for="fruit in fruits" :key="fruit">
      <input type="checkbox" :id="fruit" :value="fruit" v-model="selectedFruits">
      <label :for="fruit">{{ fruit }}</label>
    </div>
    <p>选中的水果：{{ selectedFruits }}</p>
  </div>
</template>

<script>
export default {
  data() {
    return {
      fruits: ['苹果', '香蕉', '橙子', '葡萄'],
      selectedFruits: []
    }
  }
}
</script>

在上面的示例中，我们使用了一个数组 fruits 来存储多个水果的选项。通过 v-for 指令和数组的每个元素生成相应的复选框，并且使用 v-model 将复选框的值与 selectedFruits 数组进行绑定。当复选框的选中状态发生变化时，对应的水果名称会被添加到或从 selectedFruits 数组中。

禁用复选框

如果需要禁用某个复选框，可以使用 disabled 属性来实现。通过将 disabled 属性设置为 true，复选框将变为禁用状态，用户将无法对其进行操作。

下面是一个示例，展示如何禁用复选框：

<template>
  <div>
    <input type="checkbox" id="check" v-model="isChecked" :disabled="isDisabled">
    <label for="check">选中状态：{{ isChecked }}</label>
  </div>
</template>

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

在上面的示例中，我们使用了一个布尔类型的变量 isDisabled 来表示复选框的禁用状态。当 isDisabled 的值为 true 时，复选框将被禁用。