前記事: 08. 入力したカラーコードをリアルタイムでプレビューする 次記事: 10. 色表示とカラーコードをスライダで動的に変更する 09. カラーピッカーで選択した色を動的に表示する Vue.jsバージョン: 2.5.2 入力フィールドとカラーピッカーのどちらでも色を指定できます。 入力フィールドには6桁の16進数でカラーコードを入力できます。 入力フィールドの下の色付きボックスをクリックするとカラーピッカーが表示されます。 カラーピッカーで色を選択した瞬間に、ボックス色と入力フィールドに反映されます。 これも双方向データバインディングの応用例です。以下のように両方の<input>フィールドでv-model="a"を使い、同じ変数を割り当てているだけです(読みやすさのため余分な行や属性を取り除いてあります)。 <input type="text" v-model="a" /> <inp
![Vue.jsサンプルコード(09)カラーピッカーで選択した色を動的に表示する|TechRacho by BPS株式会社](https://cdn-ak-scissors.b.st-hatena.com/image/square/c9da8d92cc579fc12d9f54372bfb437c7d179dc2/height=288;version=1;width=512/https%3A%2F%2Ftechracho.bpsinc.jp%2Fwp-content%2Fuploads%2F2017%2F06%2Fvuejs_logo_eyecatch.png)