vue.jsの使い方の基礎＃６【フォーム入力バインディング】

ドキュメントに沿って手を動かしたことを自分用教科書として書いていきます（フォーム入力バインディングの部分）
公式ドキュメントとやっていることは基本的に同じです。

Vue.js基礎知識に関する記事を随時更新しています。もしよければ参考にしてください。

#基本的な使い方
formの要素（input,textarea,select）に双方向データバインディング（vueがもつ情報とアプリケーション状態の結びつけ）を付与するためにv-modeを使用することができます。
v-modelはフォーム要素の value 属性や checked 属性、selected 属性の初期値を無視します。

内部的には、v-modelは異なる input 要素に対し異なるプロパティを使用し、異なるイベントを送出します。

要素が違うなら使うプロパティもちがうわよってことらしい。

##text要素
text および textarea 要素には、value プロパティと input イベントを用います

.vue

<!-- text -->
<input v-model="message" placeholder="edit me" />
<p>Message is: {{ message }}</p>


<!-- textarea -->
<span>Multiline message is:</span>
<p style="white-space: pre-line;">{{ message }}</p>
<br />
<textarea v-model="message" placeholder="add multiple lines"></textarea>

入力フィールドと、入力した文字が画面に即時表示されます。
　
　
##チェックボックス要素
チェックボックスには、checked プロパティと change イベントを用います

.vue

<!-- 単一のチェックボックス -->
<input type="checkbox" id="checkbox" v-model="checked" />
<label for="checkbox">{{ checked }}</label>

チェックボックスを押下すると、true,falseが切り替わります。

.vue

<!-- 同じ配列にバインドされた複数のチェックボックス -->
    <input type="checkbox" id="jack" value="Jack" v-model="checkedNames" />
    <label for="jack">Jack</label>
    <input type="checkbox" id="john" value="John" v-model="checkedNames" />
    <label for="john">John</label>
    <input type="checkbox" id="mike" value="Mike" v-model="checkedNames" />
    <label for="mike">Mike</label>
    <br />
    <span>Checked names: {{ checkedNames }}</span>

～～略～～
<script>
export default {
    data() {
        return {
            checkedNames:[]
        }
    }
}
</script>

押下したチェックボックスの名前が表示されます。

##ラジオボタン要素
ラジオボタンには、チェックボックスと同じくchecked プロパティと change イベントを用います

.vue

  <input type="radio" id="one" value="One" v-model="picked" />
  <label for="one">One</label>
  <br />
  <input type="radio" id="two" value="Two" v-model="picked" />
  <label for="two">Two</label>
  <br />
  <span>Picked: {{ picked }}</span>

～～略～～

##select要素
select フィールドには、value プロパティと change イベントを用います

.vue

　<select v-model="selected">
    <option disabled value="">Please select one</option>
    <option>A</option>
    <option>B</option>
    <option>C</option>
  </select>
  <span>Selected: {{ selected }}</span>

～～略～～

以下公式引用

v-model の式の初期値がいずれのオプションとも一致しない場合、 要素は 未選択 の状態で描画されます。これにより iOS では最初のアイテムが選択できなくなります。なぜなら iOS はこのような場合に change イベントを発火させないためです。したがって、上記の例で示したように、value を持たない disabled なオプションを追加しておくことをおすすめします。

#修飾子

##.lazy
デフォルトでは v-model は各 input イベント後に入力値とデータを同期します。lazy 修飾子を加えることで、change イベント後に同期するよう変更できます。

たとえば、先程の入力フィールドでは、入力された瞬間にデータを同期していましたが、
lazy 修飾子を加えることで、入力し終わってEnterで入力フィールドを出たときにデータを同期させることができるわけですね。

.vue

<input v-model.lazy="msg" />

##.number
ユーザ入力を自動的に number へ型キャストさせたい場合に使用します。
type="number" が書いてあったとしても HTML の input 要素は常に文字列を返すため、これはかなり有用ですね。
値が parseFloat() でパースできない場合は、元々の値が返却されます。

.vue

<input v-model.number="age" type="number" />

##.trim
ユーザ入力から空白を自動で取り除きたい場合は、v-model で管理している input に trim 修飾子を加えることができます。

.vue

<input v-model.trim="msg" />