Vueでのチェックボックス操作

それでは、 チェックボックスの 操作方法を見ていきましょう。 次のようなトグルスイッチがあるとします：

App.vue<template>
  <input type="checkbox">
</template>

このcheckboxの動作を制御する checkedプロパティを作成しましょう：

javascriptdata() {
  return {
    checked: true,
  }
}

v-modelを通じてこのプロパティをバインドします：

App.vue<template>
  <input type="checkbox" v-model="checked">
</template>

checkboxがチェックされている場合、checkedプロパティは trueの値を持ち、チェックされていない場合はfalseの値を持ちます。 これを確認するには、次のようにプロパティの値を画面に表示できます：

App.vue<template>
  <input type="checkbox" v-model="checked">
  <p>{{ checked }}</p>
</template>

三項演算子を使用して、より意味のあるものを表示できます：

App.vue<template>
  <input type="checkbox" v-model="checked">
  <p>{{ checked ? 'はい' : 'いいえ' }}</p>
</template>