Vue.js フォーム入力バインディング

v-model利用時の属性について

v-modelを利用してデータバインディングした場合は
value,checked,selectedなどの属性は無視されます。

以下のコードで検証してみましょう
jsfiddleで実際に記述しながら読むことをおすすめします。

index/html

<divid="app"><p>
  {{message}}
</p><p><inputtype="text"v-model="message"　value="hogehoge"></p><pre>
  {{ $data }}
</pre></div><script src ="https://cdn.jsdelivr.net/npm/vue@2.5.16/dist/vue.js"></script>

index.js

varapp=newVue({el:'#app',data:{message:"Hello Vue.js"}})

実行結果

上記ではinputタグのvalueとして"hogehoge"を指定していますが
バインディングの結果value属性は無視されています。

複数行テキスト

textareaではマスタッシュ構文{{}}を使ったデータバインディングは使えません。

index/html

<divid="app"><p>
  {{ message }}
</p><textarea>
  {{ message }}
</textarea><pre>
  {{ $data }}
</pre><script src ="https://cdn.jsdelivr.net/npm/vue@2.5.16/dist/vue.js"></script>

index.js

varapp=newVue({el:'#app',data:{message:"Hello Vue.js"}})

実行結果

テキストエリアではマスタッシュ構文は使えないため
入力した値は変わりません。

v-modelディレクティブを使用して書き直してみましょう。

index/html

<divid="app"><p>
  {{ message }}
</p><textareav-model="message"></textarea><pre>
  {{ $data }}
</pre><script src ="https://cdn.jsdelivr.net/npm/vue@2.5.16/dist/vue.js"></script>

index.js

varapp=newVue({el:'#app',data:{message:"Hello Vue.js"}})

実行結果

双方向バインディングによってデータが同期されています。

チェックボックス

チェックボックスはタイプによって以下となります。
単体チェックボックス　boolean値
複数チェックボックス　配列

単体チェックボックス

チェックの有無でtrue/falseを切り替えてみましょう

index/html

<divid="app"><inputtype="checkbox"id="checkbox"v-model="checked"><labelfor="checkbox">{{checked}}</label><pre>{{ $data }}</pre></div><script src ="https://cdn.jsdelivr.net/npm/vue@2.5.16/dist/vue.js"></script>

index.js

varapp=newVue({el:'#app',data:{checked:false}})

実行結果

複数チェックボックス

index/html

<divid="app"><inputtype="checkbox"id="red"value="Red"v-model="colors"><labelfor="red">Red</label><inputtype="checkbox"id="blue"value="Blue"v-model="colors"><labelfor="red">Blue</label><inputtype="checkbox"id="green"value="Green"v-model="colors"><labelfor="red">Green</label><p>
  {{colors}}
</p></div><script src ="https://cdn.jsdelivr.net/npm/vue@2.5.16/dist/vue.js"></script>

index.js

varapp=newVue({el:'#app',data:{colors:[],}})

実行結果

チェックボックスで選択されたnameがv-modelディレクティブによって配列colorsに格納されます。

ラジオボタン

ラジオボタンの場合は以下です。

index/html

<divid="app"><inputtype="radio"id="red"value="Red"v-model="color"><labelfor="red">Red</label><inputtype="radio"id="green"value="Green"v-model="color"><labelfor="green">Green</label><inputtype="radio"id="blue"value="Blue"v-model="color"><labelfor="blue">Blue</label><p>
  {{color}}
</p></div><script src ="https://cdn.jsdelivr.net/npm/vue@2.5.16/dist/vue.js"></script>

index.js

varapp=newVue({el:'#app',data:{color:""}})

実行結果

選択の結果は１つなのでdataオプションのプロパティ名もcolorと単数にしています。

セレクトボックス（単体の選択）

セレクトボックスの場合は以下のように記述します

index/html

<divid="app"><selectname=""v-model="selected"><optiondisabledvalue="">Please select one</option>　<option>Red</option>　<option>Green</option>　<option>Blue</option></select><p>
  {{ selected }}
</p></div><script src ="https://cdn.jsdelivr.net/npm/vue@2.5.16/dist/vue.js"></script>

index.js

varapp=newVue({el:'#app',data:{selected:""}})

実行結果

初期値のPlease select oneは選択できないようにしておきましょう

セレクトボックス（複数の選択）

複数選択の場合はプロパティのデフォルト値を配列にしましょう

index/html

<divid="app"><selectname=""v-model="selected"multiple><optiondisabledvalue="">Please select one</option><option>Red</option><option>Green</option><option>Blue</option></select><p>
  {{ selected }}
</p></div><script src ="https://cdn.jsdelivr.net/npm/vue@2.5.16/dist/vue.js"></script>

index.js

varapp=newVue({el:'#app',data:{selected:[]}})

実行結果

シフトキーを押しながら選択することで複数選択を可能にし配列に格納しています。

フォーム入力バインディングの修飾子

フォーム入力バインディングの代表的な修飾子は以下です。

.lazy　バインドのタイミングを遅延させる
.trim　入力前後の空白を取り除いてデータに代入
.number　入力値を数値型に変換してから代入

修飾子.lazy

修飾子.lazyで入力確定後のバインディングを実装することができます。

.lazyなし

１文字ずつバインディングされてしまいます

.lazyあり

エンターキーで確定したタイミングでバインディングされます。

コードの記述は以下です。

index/html

<divid="app"><p><inputtype="text"v-model.lazy="message"></p><p>
  {{message}}
</p></div><script src ="https://cdn.jsdelivr.net/npm/vue@2.5.16/dist/vue.js"></script>

index.js

varapp=newVue({el:'#app',data:{message:""}})

v-modelディレクティブの末尾に.lazyと追記しています。

修飾子.trim

修飾子.trimでinputされたデータの前後の空白（space）を取り除くことができます

.trimなし

abcの前後に半角スペースを５個入れています。

.trimあり

コードの記述は以下です。
```html:index/html

  {{$data}}

```

index.js

varapp=newVue({el:'#app',data:{message:""}})

全角のスペースも取り除くことができます。

修飾子.number

.number修飾子は入力値を数値型に型変換してからデータに代入します。

ユーザー入力の値に+10するプログラムを記述しましょう
まずは以下を記述します

index/html

<divid="app"><p><inputtype="number"v-model="age"></p><p>
  {{ age + 10}}
</p></div><script src ="https://cdn.jsdelivr.net/npm/vue@2.5.16/dist/vue.js"></script>

index.js

varapp=newVue({el:'#app',data:{age:0}})

実行結果

htmlのinput要素のはvalueはtype属性にnumberを使用しても文字列と認識されます。

以下のように.numberを追記します

<inputtype="number"v-model.number="age">

実行結果

計算結果が正しく取得されるようになりました。

次回はコンポーネントです。

Vue.js フォーム入力バインディング

v-model利用時の属性について

複数行テキスト

チェックボックス

単体チェックボックス

複数チェックボックス

ラジオボタン

セレクトボックス（単体の選択）

セレクトボックス（複数の選択）

フォーム入力バインディングの修飾子

修飾子.lazy

修飾子.trim

修飾子.number

Latest Images

Trending Articles

Latest Images