Vue.js フォーム
この節では Vue.js フォームでの応用を紹介します。
v-model ディレクティブを使用して、フォームコントロール要素に双方向データバインディングを作成できます。
v-model はコントロールの種類に応じて自動的に正しい方法を選択して要素を更新します。
入力ボックス
このインスタンスでは、input と textarea 要素で v-model を使用して双方向データバインディングを実現しています：
<div id="app">
<p>input 要素：</p>
<input v-model="message" placeholder="編集してください……">
<p>メッセージ: {{ message }}</p>
<p>textarea 要素：</p>
<p style="white-space: pre">{{ message2 }}</p>
<textarea v-model="message2" placeholder="複数行テキスト入力……"></textarea>
</div>
<script>new Vue({
el: '#app',
data: {
message: 'サンプル',
message2: 'サンプル\r\nhttp://www.example.com'
}
})</script>
試してみる »
チェックボックス
単一のチェックボックスの場合、値は論理値になります。複数の場合は同じ配列にバインドされます：
チェックボックス
次のインスタンスでは、チェックボックスの双方向データバインディングをデモします：
<div id="app">
<p>単一チェックボックス：</p>
<input type="checkbox" id="checkbox" v-model="checked">
<label for="checkbox">{{ checked }}</label>
<p>複数チェックボックス：</p>
<input type="checkbox" id="サンプル" value="サンプル" v-model="checkedNames">
<label for="サンプル">サンプル</label>
<input type="checkbox" id="google" value="Google" v-model="checkedNames">
<label for="google">Google</label>
<input type="checkbox" id="taobao" value="Taobao" v-model="checkedNames">
<label for="taobao">taobao</label>
<br>
<span>選択された値: {{ checkedNames }}</span>
</div>
<script>
new Vue({
el: '#app',
data: {
checked : false,
checkedNames: []
}
})
</script>
試してみる »
インスタンスでチェックボックスをチェックしたときの効果は以下の通りです：
ラジオボタン
次のインスタンスでは、ラジオボタンの双方向データバインディングをデモします：
ラジオボタン
<div id="app">
<input type="radio" id="サンプル" value="サンプル" v-model="picked">
<label for="サンプル">サンプル</label>
<br>
<input type="radio" id="google" value="Google" v-model="picked">
<label for="google">Google</label>
<br>
<span>選択された値: {{ picked }}</span>
</div>
<script>
new Vue({
el: '#app',
data: {
picked : 'サンプル'
}
})
</script>
試してみる »
選択後、効果は以下のようになります：
select リスト
次のインスタンスでは、ドロップダウンリストの双方向データバインディングをデモします：
select
<div id="app">
<select v-model="selected" name="fruit">
<option value="">ウェブサイトを選択</option>
<option value="www.example.com">サンプル</option>
<option value="www.google.com">Google</option>
</select>
<div id="output">選択されたサイト: {{selected}}</div>
</div>
<script>
new Vue({
el: '#app',
data: {
selected: ''
}
})
</script>
試してみる »
サンプル を選択すると、出力効果は以下のようになります：
修飾子
.lazy
デフォルトでは、v-model は input イベントで入力ボックスの値とデータを同期しますが、修飾子 lazy を追加することで、change イベントで同期するように変更できます：
<!-- 在 "change" 而不是 "input" 事件中更新 -->
<input v-model.lazy="msg" >
.number
ユーザーの入力値を自動的に Number 型に変換したい場合（元の値の変換結果が NaN の場合は元の値を返します）、修飾子 number を v-model に追加して入力値を処理できます：
<input v-model.number="age" type="number">
これは通常非常に便利です。なぜなら type="number" の場合、HTML で入力された値も常に文字列型で返されるからです。
.trim
ユーザーが入力した前後の空白を自動的に除去したい場合は、v-model に trim 修飾子を追加して入力をフィルタリングできます：
<input v-model.trim="msg">
その他の拡張