- Ruby / Rails以外の開発一般
READ MORE
09. カラーピッカーで選択した色を動的に表示する
- Vue.jsバージョン: 2.5.2
- 入力フィールドとカラーピッカーのどちらでも色を指定できます。
- 入力フィールドには6桁の16進数でカラーコードを入力できます。
- 入力フィールドの下の色付きボックスをクリックするとカラーピッカーが表示されます。
- カラーピッカーで色を選択した瞬間に、ボックス色と入力フィールドに反映されます。
サンプルコード
これも双方向データバインディングの応用例です。以下のように両方の<input>フィールドでv-model="a"を使い、同じ変数を割り当てているだけです（読みやすさのため余分な行や属性を取り除いてあります）。
<input type="text" v-model="a" />
<input type="color" v-model="a" />
Vue.jsのコードもあきれるほど簡単なままです。
new Vue({
el: "#app",
data: {a: "#6B8CFF"},
})
なおカラーピッカーは、Vue.jsではなく、HTML5の機能であるtype='color'を使っています。
注意: 現時点のSafariはHTML5のカラーピッカー表示用属性type='color'に対応していません。iOSも含めて色指定機能を付けるには次回のサンプルコード（10）をご覧ください。
v-bindの:src
前回、:styleと:classには魔法が効くと書きました。v-bindのうち、:srcにも別のささやかな魔法があります。例はいずれも省略記法で書いています。
<!-- 属性を指定 -->
<img :src="imageSrc">
<!-- インラインでの文字列連結もできる -->
<img :src="'/path/to/images/' + fileName">
:srcでは一重の{ }を使わずにすっきり書けるところがささやかな魔法です。
バックナンバー（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）パスワードを入力中だけ表示する