Webページとデータを関連付けるVue.jsのデータバインディング（2）
さまざまな入力部品とv-modelディレクティブ
さまざまな入力部品でv-modelディレクティブを利用する例を、図2のサンプルで説明します。入力部品に入力した内容が、入力部品のすぐ下に表示されます。
図2で利用しているv-modelディレクティブの記述をリスト2に示します。
<h3>テキストボックス</h3> <!--（1）--> <input v-model="text1"> <h3>複数行テキストボックス</h3> <!--（2）--> <textarea v-model="text2"></textarea> <h3>チェックボックス</h3> <!--（3）--> <input type="checkbox" id="checkbox" v-model="checkboxValue"> <label for="checkbox">私はNuxt.jsが好き</label> <h3>ラジオボタン</h3> <!--（4）--> <input type="radio" id="radio1" value="vue" v-model="radioValue"> <label for="radio1">Vue.js</label> <input type="radio" id="radio2" value="angular" v-model="radioValue"> <label for="radio2">Angular</label> <input type="radio" id="radio3" value="react" v-model="radioValue"> <label for="radio3">React</label> <h3>選択</h3> <!--（5）--> <select v-model="selectValue"> <option disabled value=""></option> <option value="vue">Vue.js</option> <option value="angular">Angular</option> <option value="react">React</option> </select> <h3>複数チェックボックス</h3> <!--（6）--> <input type="checkbox" id="checkbox1" value="vue" v-model="checkboxArray"> <label for="checkbox1">Vue.js</label> <input type="checkbox" id="checkbox2" value="angular" v-model="checkboxArray"> <label for="checkbox2">Angular</label> <input type="checkbox" id="checkbox3" value="react" v-model="checkboxArray"> <label for="checkbox3">React</label> <h3>複数選択</h3> <!--（7）--> <select v-model="selectArray" multiple> <option value="vue">Vue.js</option> <option value="angular">Angular</option> <option value="react">React</option> </select>
テキストボックスは、通常の（1行の）テキストボックス（1）のほか、<textarea>タグによる複数行テキストボックス（2）でも同様にv-modelディレクティブが利用できます。
（3）はチェックボックスの例です。v-modelで設定した変数に、チェック状態（trueまたはfalse）が格納されます。
（4）のラジオボタンや（5）の選択では、選択されたラジオボタンや選択肢に対応する値（value属性の値）が、v-modelで設定した変数に格納されます。
複数選択に対応した（6）のチェックボックスや（7）の選択では、v-modelに配列変数を設定すると、選択された複数の値が配列に格納されます。
［補足］v-modelディレクティブの修飾子
v-modelディレクティブには、入力内容が確定した時のみデータを更新する「.lazy」、入力内容を数字に変換する「.number」、入力された文字列前後の空白を削除する「.trim」の修飾子を付与できます。修飾子を付与する例をリスト3に示します。
<input v-model.number="number1">
修飾子の詳細は、公式ドキュメントを参照してください。
v-bindディレクティブでクラスやスタイルを設定
v-bindディレクティブを利用すると、HTMLタグの任意の属性に、Vue.jsの変数内容を反映させられます。特に、CSSのクラス（class属性）とスタイル（style属性）では、JavaScriptオブジェクトを利用してより詳細な設定ができます。この例を、図3のサンプルで説明します。チェックボックスでクラスの適用有無を切り替えたり、テキストボックスでスタイル（文字色）を設定したりできます。
まず、class属性のデータバインディング記述を、リスト4に示します。
<label for="checkbox1" v-bind:class="{ 'color-red' : isChecked }">
文字を赤色にする
</label>
v-bind:classに設定された「{ 'color-red' : isChecked }」は、isChecked変数がtrueの時に、CSSクラス「color-red」が適用されることを意味します。この記述で、適用されるCSSクラスを条件によって切り替えられます。
次に、style属性のデータバインディング記述を、リスト5に示します。
<div v-bind:style="{ color: fontColor }">
色：{{ fontColor }}
</div>
v-bind:styleに設定された「{ color: fontColor }」は、CSSのcolorプロパティに、fontColor変数の内容を設定することを意味します。サンプルではfontColor変数がテキストボックスにデータバインディングされているため、テキストボックスに色名を入力すると、色名に対応した色で文字列が表示されます。
［補足］算出プロパティの利用
Vue.jsでは、算出プロパティ（変数をもとに算出した読み取り専用のプロパティ）を定義できます。例えば、リスト4、5でv-bindディレクティブに設定されている内容は、リスト6の通り算出プロパティにできます。
export default {
（略）
computed: { // 算出プロパティ
computedClass() {
return { 'color-red' : this.isChecked }; // this.isCheckedから算出
},
computedStyle() {
return { color: this.fontColor }; // this.fontColorから算出
}
}
}
リスト6の算出プロパティcomputedClass、computedStyleは、リスト7の通りv-bindディレクティブに設定できます。
<!-- class -->
<label for="checkbox1" v-bind:class="computedClass">
文字を赤色にする
</label>
<!-- style -->
<div v-bind:style="computedStyle">
色：{{ fontColor }}
</div>
