【Vue.js】チェックボックス

#はじめに
こんにちは！
今回は【Vue.js】でのチェックボックスについてアウトプットしていきます！

#チェックボックスについて
・単体のチェックボックスはbooleanを使用
・複数のチェックボックスは配列[]を使用

#書き方・解説

（例題）チェックを入れたらtrueとfalseが入れ替わるプログラムを書いていきます。

##単体

HTML

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

Vue.js

   data: {
     checked: false
   }

dataオプションにchecked:falseを設置します。
<テンプレート側>

チェックボックスを設置し、v-model="checked"でcheckedと双方データバインディングさせます。
そしたらid="checkbox"と<label for="checkbox">でこちらも紐付けます。

このように記述するとチェックを入れたら

labelの部分もtrueに変わります。

##複数

HTML

  <input type="checkbox" id="red" value="Red" v-model="colors">
  <label for="red">Red</label>
  <input type="checkbox" id="green" value="Green" v-model="colors">
  <label for="green">Green</label>
  <input type="checkbox" id="blue" value="Blue" v-model="colors">
  <label for="blue">Blue</label>
  <p>
    {{ colors }}
  </p>

Vue.js

   data: {
     colors: []
   }

チェックボックスのデータを管理するプロパティcolorsを設置します。複数の型は配列なので初期値は空にします。

<テンプレート側>
チェックボックスとラベルを表示させます。この一連の記述は単体の方で解説しているので省略します。
単体と違う点はvalue属性を使い、初期値を指定している点です。valueで初期値を指定できていなかったらnullと表示されてしまいます。

このように記述すると、

複数のチェックボックスを反映できました！

#まとめ
・単体のチェックボックスはboolean
・複数のチェックボックスは配列[]
・複数はvalue属性で初期値を指定。
・単体も複数も記述文はほぼ一緒。

#最後に
今回はチェックボックス「単体/複数」についてアウトプットしました。
今回の記事を読んで質問、間違い等あればコメント等頂けると幸いです。

今後ともQiitaにてアウトプットしていきます！

最後までご愛読ありがとうございました！