使用 v-model 綁定單一 Checkbox | 點燈坊

v-model 不僅僅只能綁定到 Textbox，也可以綁定到單一 CheckBox，當在 HTML 改變 Checkbox 狀態時，JavaScript 也會連動改變 State。

Version

Vue 3.4

Composition API

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

<script setup>
import { ref } from 'vue'

let checked = ref(false)
</script>

• type=checkbox：為必須不能省略
• id 主要是為了 for 搭配
• v-model：直接將 Checkbox 綁定到 checked state，任何在 HTML 對 state 變動會連動 JavaScript，任何在 JavaScript 對 state 變動也會連動 HTML
• 單一 Checkbox 的 state 為 Boolean

Options API

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

<script>
export default {
  data: () => ({
    checked: false
  })
}
</script>

• 最後附上相同功能的 Options API 供參考
• State 宣告在 data() function，為 Boolean
• v-model 使用上不變

Conclusion

• Checkbox 一樣可以使用 v-model 綁定
• 單一 Checkbox 綁定值是 Boolean

Reference

Vue, 複選框