Vue.jsサンプルコード（09）カラーピッカーで選択した色を動的に表示する｜TechRacho by BPS株式会社
前記事: 08. 入力したカラーコードをリアルタイムでプレビューする 次記事: 10. 色表示とカラーコードをスライダで動的に変更する 09. カラーピッカーで選択した色を動的に表示する Vue.jsバージョン: 2.5.2 入力フィールドとカラーピッカーのどちらでも色を指定できます。 入力フィールドには6桁の16進数でカラーコードを入力できます。 入力フィールドの下の色付きボックスをクリックするとカラーピッカーが表示されます。 カラーピッカーで色を選択した瞬間に、ボックス色と入力フィールドに反映されます。 これも双方向データバインディングの応用例です。以下のように両方の<input>フィールドでv-model="a"を使い、同じ変数を割り当てているだけです（読みやすさのため余分な行や属性を取り除いてあります）。 <input type="text" v-model="a" /> <inp
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
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
処理を実行中です
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
