Vue.jsサンプルコード（09）カラーピッカーで選択した色を動的に表示する

• 前記事: 08. 入力したカラーコードをリアルタイムでプレビューする
• 次記事: 10. 色表示とカラーコードをスライダで動的に変更する

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では一重の{ }を使わずにすっきり書けるところがささやかな魔法です。

• 前記事: 08. 入力したカラーコードをリアルタイムでプレビューする
• 次記事: 10. 色表示とカラーコードをスライダで動的に変更する

バックナンバー（Vue.jsサンプルコード）

Vue.jsサンプルコード（01〜03）Hello World・簡単な導入方法・デバッグ・結果の表示とメモ化

• 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）パスワードを入力中だけ表示する