ガイド
基本的な使い方
- インストール
- はじめに
- Vue インスタンス
- テンプレート構文
- 算出プロパティとウォッチャ
- クラスとスタイルのバインディング
- 条件付きレンダリング
- リストレンダリング
- イベントハンドリング
- フォーム入力バインディング
- コンポーネント
トランジションとアニメーション
- Enter/Leave とトランジション一覧
- 状態のトランジション
再利用と構成
- ミックスイン
- カスタムディレクティブ
- 描画関数とJSX
- プラグイン
- フィルター
ツール
- プロダクション環境への配信
- 単一ファイルコンポーネント
- 単体テスト
- TypeScript のサポート
スケールアップ
- ルーティング
- 状態管理
- サーバサイドレンダリング
内部
- リアクティブの探求
移行
- Vue 1.x からの移行
- Vue Router 0.7.x からの移行
- Vuex 0.6.x から 1.0 への移行
その他
- 他のフレームワークとの比較
- Vue.js コミュニティへ参加しましょう!
- チームに会おう
フォーム入力バインディング
最終更新日: 2018年3月5日
基本的な使い方
form の input 要素 と textarea 要素で双方向 (two-way) データバインディングを作成するには、v-model
ディレクティブを使用することができます。それは、自動的に入力されたタイプに基づいて要素を更新するための正しい方法を選択します。わずかな魔法とはいえ、v-model
は本質的にユーザーの入力イベントにおいてデータを更新するための糖衣構文 (syntax sugar) で、そのうえ、いくつかのエッジケースに対して特別な配慮が必要です。
v-model
は任意の form 要素にある value
、checked
または selected
属性の初期値を無視します。input または textarea は常に、信頼できる情報源として Vue インスタンスを扱います。コンポーネントの data
オプションの中で JavaScript 側で初期値を宣言する必要があります。
IME (中国語、日本語、韓国語、その他) が必須な言語に対しては、v-model
は IME コンポジションの間は更新されないことに注意してください。これらの更新に対して対応したい場合は、input
イベントを代わりに使用します。
テキスト
<input v-model="message" placeholder="edit me"> |
Message is: {{ message }}
複数行テキスト
<span>Multiline message is:</span> |
{{ message }}
textarea への挿入 (<textarea>{{text}}</textarea>
) は動きません。代わりに、v-model
を使用してください。
チェックボックス
単体のチェックボックスは、 boolean 値です:
<input type="checkbox" id="checkbox" v-model="checked"> |
複数のチェックボックスは、同じ配列に束縛します。:
<div id='example-3'> |
new Vue({ |
Checked names: {{ checkedNames }}
ラジオ
<input type="radio" id="one" value="One" v-model="picked"> |
Picked: {{ picked }}
選択
単体の選択:
<select v-model="selected"> |
new Vue({ |
v-model
の式の初期値がオプションのどれとも一致しない場合、<select>
要素は “未選択” の状態で描画されます。iOS ではこの場合、iOS が change イベントを発生させないため、最初のアイテムを選択できなくなります。したがって、上記の例に示すように、空の値で無効なオプションを指定することを推奨します。
複数の選択(配列に束縛):
<select v-model="selected" multiple> |
Selected: {{ selected }}
動的オプションは v-for
で描画できます:
<select v-model="selected"> |
new Vue({ |
値のバインディング
radio 、 checkbox 、そして select オプションは、 v-model
バインディングの値は通常静的文字列 (または、チェックボックスには boolean) を指定します:
<!-- チェックされたとき、`picked` は文字列"a"になります --> |
しかし、時どき、Vue インスタンスの動的プロパティに値を束縛したいかもしれません。それを達成するために v-bind
を使用することができます。 加えて、v-bind
を使用すると input 値は文字列以外の値で束縛できます。
チェックボックス
<input |
// チェックされたとき: |
true-value
と false-value
属性は入力フォームの value
属性に影響しません。なぜならブラウザはフォームの送信にチェックされていないボックスを含まないからです。 2つの値のうちのいずれかがフォームで送信されるようにするには、代わりにラジオを使用してください(例: “はい” または “いいえ”)。
ラジオ
<input type="radio" v-model="pick" v-bind:value="a"> |
// チェックしたとき: |
選択オプション
<select v-model="selected"> |
// 選択したとき: |
修飾子
.lazy
デフォルトでは、 v-model
は各 input
イベント (上記の IME コンポジションを除いて) 後に、データと入力を同期します。 change
イベント後に同期するように変更するために lazy
修飾子を追加することができます:
<!-- "input" の代わりに "change" 後に同期します --> |
.number
ユーザの入力を数値として自動的に型変換したいとき、 v-model
に管理された入力に number
修飾子を追加することができます:
<input v-model.number="age" type="number"> |
これは、しばしば有用です。なぜなら、 type=number
と書いたときでさえ、 HTML の input 要素の value は常に文字列を返すからです。
.trim
ユーザの入力を自動的にトリムしたいとき、 v-model
に管理された入力に trim
修飾子を追加することができます:
<input v-model.trim="msg"> |
コンポーネントの v-model
Vue のコンポーネントにまだ精通していない人は、この部分をスキップしてください。
HTML の組み込みの input 要素は常にあなたの要望に合うとは限りません。幸いにも、Vue のコンポーネントを使用すると、完全にカスタマイズされた動作で再利用可能な独自の input 要素的なものを作成することができます。これらの入力コンポーネントは v-model
を使用することができます!より詳細については、カスタム入力をコンポーネントガイドで参照してください。