08. 入力したカラーコードをリアルタイムでプレビューする
はなはだ簡単ですが、これも双方向データバインディングの例です。
- Vue.jsバージョン: 2.5.2
- 6桁または3桁の16進カラーコードを入力すると、その場で下の色が更新されます。
サンプルコード
:styleや:classには「魔法」が効く
今回のはシンプルですが、ポイントはHTMLの:style="{color: a}の部分です。
<div class="help-block" :style="{color: a}">
これはv-bindの略記法です（実はこれまでのサンプルコードにも登場しています）。普通のHTML属性と異なるのは、属性名が:で始まっていることです。
<!-- 属性を束縛 -->
<img v-bind:style="{ fontSize: size + 'px' }">
<!-- 省略記法 -->
<img :style="{ fontSize: size + 'px' }">
1つ以上の属性またはコンポーネントのプロパティと式を動的に束縛します。
classまたはstyle属性と束縛する場合、配列やオブジェクトのような追加の値タイプをサポートします。詳細は下記にリンクしたガイドセクションを参照してください。
api/#v-bindより
配列やオブジェクトなどの値タイプも使えるようになるところがタイトルで言う「魔法」です。
Vue.jsで処理された後は普通のclass属性やstyle属性に変わります。
HTMLタグで通常の属性の代わりに:classや:styleを使うことで、HTMLのコンテンツでVue.jsの{{ }}を使えるのと似た要領で、配列やオブジェクトも使って属性を動的に変更できるようになります。ERBの<%= ... %>やPHPの<?php ... ?>より場所を取らないので属性をすっきりと動的にできます。
なおv-bindを直接使うなどしてもっといろいろできますが、やりすぎ注意です。
<!-- 属性のオブジェクトのバインディング -->
<div v-bind="{ id: someProp, 'other-attr': otherProp }"></div>
おまけ: <input>のtype='number'について
公式ドキュメントによると、<input>タグでtype='number'を付けると自動で数値に型変換されるとありますが、実際は数値への型変換はtype='number'なしでも行われます。
したがって、そのままcomputedで計算できます。
サンプルコード06で、以下のようにHTML属性のtype='number'を削除しても動作します。
<input class='form-control' type='number' v-model='b'>
↓
<input class='form-control' v-model='b'>
その代わりサンプルコード06は数値以外の文字も入力できるようになってしまい、文字を入力すると計算結果もNaNになってしまいますが。
バックナンバー（Vue.jsサンプルコード）
- Vue.jsサンプルコード（04）双方向データバインディングを使ってみる
- Vue.jsサンプルコード（05）複数のinputに同じ変数を割り当てる
- Vue.jsサンプルコード（06）合計金額をリアルタイムに表示する
- Vue.jsサンプルコード（07）入力文字数をリアルタイムにプレビューする
- Vue.jsサンプルコード（08）入力したカラーコードをリアルタイムでプレビューする
- Vue.jsサンプルコード（09）カラーピッカーで選択した色を動的に表示する
- Vue.jsサンプルコード（10）スライダーで入力したカラーコードを動的に表示する
- Vue.jsサンプルコード（11）ラベルをクリックして表示開閉とラベル変更を行う
- Vue.jsサンプルコード（12）特定の単語を入力したらボタンを無効にする
- Vue.jsサンプルコード（13）「承認」チェックボックスをオンにしないと「送信」ボタンを押せないようにする
- Vue.jsサンプルコード（14）「承認」ボタンを押したら解除できないようにする
- Vue.jsサンプルコード（15）パスワードのマスクを解除する
- Vue.jsサンプルコード（16）パスワードを入力中だけ表示する