Vue.jsサンプルコード(09)カラーピッカーで選択した色を動的に表示する

09. カラーピッカーで選択した色を動的に表示する

  • Vue.jsバージョン: 2.5.2
  • 入力フィールドとカラーピッカーのどちらでも色を指定できます。
  • 入力フィールドには6桁の16進数でカラーコードを入力できます。
  • 入力フィールドの下の色付きボックスをクリックするとカラーピッカーが表示されます。
  • カラーピッカーで色を選択した瞬間に、ボックス色と入力フィールドに反映されます。

サンプルコード

これも双方向データバインディングの応用例です。以下のように両方の<input>フィールドでv-model="a"を使い、同じ変数を割り当てているだけです(読みやすさのため余分な行や属性を取り除いてあります)。

<input type="text"  v-model="a" />
<input type="color" v-model="a" />

Vue.jsのコードもあきれるほど簡単なままです。

  new Vue({
    el: "#app",
    data: {a: "#6B8CFF"},
  })

なおカラーピッカーは、Vue.jsではなく、HTML5の機能であるtype='color'を使っています。

注意: 現時点のSafariはHTML5のカラーピッカー表示用属性type='color'に対応していません。iOSも含めて色指定機能を付けるには次回のサンプルコード(10)をご覧ください。

v-bindの:src

前回:style:classには魔法が効くと書きました。v-bindのうち、:srcにも別のささやかな魔法があります。例はいずれも省略記法で書いています。

<!-- 属性を指定 -->
<img :src="imageSrc">

<!-- インラインでの文字列連結もできる -->
<img :src="'/path/to/images/' + fileName">

:srcでは一重の{ }を使わずにすっきり書けるところがささやかな魔法です。


バックナンバー(Vue.jsサンプルコード)

Vue.jsサンプルコード(01〜03)Hello World・簡単な導入方法・デバッグ・結果の表示とメモ化

Ruby on RailsによるWEBシステム開発、Android/iPhoneアプリ開発、電子書籍配信のことならお任せください この記事を書いた人と働こう! Ruby on Rails の開発なら実績豊富なBPS

この記事の著者

hachi8833

Twitter: @hachi8833、GitHub: @hachi8833 コボラー、ITコンサル、ローカライズ業界、Rails開発を経てTechRachoの編集・記事作成を担当。 これまでにRuby on Rails チュートリアル第2版の半分ほど、Railsガイドの初期翻訳ではほぼすべてを翻訳。その後も折に触れてそれぞれ一部を翻訳。 かと思うと、正規表現の粋を尽くした日本語エラーチェックサービス enno.jpを運営。 実は最近Go言語が好き。 仕事に関係ないすっとこブログ「あけてくれ」は2000年頃から多少の中断をはさんで継続、現在はnote.muに移転。

hachi8833の書いた記事

週刊Railsウォッチ

インフラ

BigBinary記事より

ActiveSupport探訪シリーズ