Vue.jsサンプルコード（08）入力したカラーコードをリアルタイムでプレビューする｜TechRacho by BPS株式会社前記事: 07. 入力文字数をリアルタイムにプレビューする 次記事: 09. カラーピッカーで選択した色を動的に表示する 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:s
