Vue复选框

Vue复选框是一种可以让用户选择多个选项的表单元素。Vue框架提供了一个简单的方式来创建这种元素。

使用方法

在HTML模板中，可以使用v-model和v-bind指令来创建Vue复选框。

<template>
  <div>
    <input type="checkbox" id="apple" value="apple" v-model="checkedFruits" />
    <label for="apple">Apple</label>

    <input type="checkbox" id="banana" value="banana" v-model="checkedFruits" />
    <label for="banana">Banana</label>

    <input type="checkbox" id="orange" value="orange" v-model="checkedFruits" />
    <label for="orange">Orange</label>

    <p>Checked fruits: {{ checkedFruits }}</p>
  </div>
</template>

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

这里我们给三个水果创建了复选框，它们都绑定在同一个数组checkedFruits中，v-model指令会自动监听这些复选框的变化，并将选中的值赋给数组。最后我们简单展示了被选中的水果。

v-bind和v-on指令

在实际开发中，我们可能需要根据一些条件动态地改变复选框的状态，或者在用户点击复选框后触发一些事件。为此，Vue框架提供了v-bind和v-on指令。

<template>
  <div>
    <input type="checkbox"
      id="apple"
      value="apple"
      v-model="checkedFruits"
      :disabled="disableApple"
      @change="onCheckboxChange"
    />
    <label for="apple">Apple</label>

    <input type="checkbox"
      id="banana"
      value="banana"
      v-model="checkedFruits"
      :disabled="disableBanana"
      @change="onCheckboxChange"
    />
    <label for="banana">Banana</label>

    <input type="checkbox"
      id="orange"
      value="orange"
      v-model="checkedFruits"
      :disabled="disableOrange"
      @change="onCheckboxChange"
    />
    <label for="orange">Orange</label>

    <p>Checked fruits: {{ checkedFruits }}</p>
  </div>
</template>

<script>
export default {
  data() {
    return {
      checkedFruits: [],
      disableApple: false,
      disableBanana: false,
      disableOrange: false
    }
  },
  methods: {
    onCheckboxChange() {
      console.log('Checkbox changed!')
    }
  }
}
</script>

这里我们添加了v-bind指令，根据条件动态地设置了复选框的disabled属性。我们也添加了v-on指令，在用户点击复选框时触发一个事件，这里我们简单地打印了一条信息。

总结

Vue复选框是一个简单而强大的表单元素，可以帮助我们处理用户的多项选择。它通过v-model和v-bind指令提供了强大的功能，让我们能够轻松地控制复选框的状态和行为。