エントリーの編集
エントリーの編集は全ユーザーに共通の機能です。
必ずガイドラインを一読の上ご利用ください。
Vue.jsサンプルコード(08)入力したカラーコードをリアルタイムでプレビューする|TechRacho by BPS株式会社
記事へのコメント0件
- 注目コメント
- 新着コメント
このエントリーにコメントしてみましょう。
注目コメント算出アルゴリズムの一部にLINEヤフー株式会社の「建設的コメント順位付けモデルAPI」を使用しています
- バナー広告なし
- ミュート機能あり
- ダークモード搭載
関連記事
Vue.jsサンプルコード(08)入力したカラーコードをリアルタイムでプレビューする|TechRacho by BPS株式会社
前記事: 07. 入力文字数をリアルタイムにプレビューする 次記事: 09. カラーピッカーで選択した色を動的... 前記事: 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