前記事: 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
![Vue.jsサンプルコード(08)入力したカラーコードをリアルタイムでプレビューする|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)