Vue.jsサンプルコード(09)カラーピッカーで選択した色を動的に表示する|TechRacho(テックラッチョ)〜エンジニアの「?」を「!」に〜|BPS株式会社エンジニアの「?」を「!」に。2.5.2入力フィールドとカラーピッカーのどちらでも色を指定できます。入力フィールドには6桁の16進数でカラーコードを入力できます。入力フィールドの下の色付きボックスをクリックするとカラーピッカーが表示されます。カラーピッカーで色を選択した瞬間に、ボックス色と入力フィールドに反映されます。サンプルコードこれも双方向データバインディングの応用例です。以下のように両方の<input>フィールドでv-model="a"を使い、同じ変数を割り当てているだけです(読みやすさのため余分な行や属性を取り除いてあります)。/>Vue.jsのコードもあきれるほど簡単なままです。})なおカラーピッカーは、Vue.jsではなく、HTML5の機能であるtype='color'を使っています。現時点のSafariはHTML5のカラーピッカー表示用属性type='color'に対応していません。iOSも含めて色指定機能を付けるには次回のサンプルコード(10)をご覧ください。v-bindの:src前回、:styleと:classには魔法が効くと書きました。v-bindのうち、:srcにも別のささやかな魔法があります。例はいずれも省略記法で書いています。}を使わずにすっきり書けるところがささやかな魔法です。コボラー、ITコンサル、ローカライズ業界、Rails開発を経てTechRachoの編集・記事作成を担当。チュートリアル第2版の監修および半分程度を翻訳、Railsガイドの初期翻訳ではほぼすべてを翻訳。その後も折に触れて更新翻訳中。enno.jpを運営。実は最近Go言語が好きで、Goで書かれたRubyライクなGoby言語のメンテナーでもある。仕事に関係ないすっとこブログ「あけてくれ」は2000年頃から多少の中断をはさんで継続、現在はnote.muに移転。Storageを使ってはいけない(翻訳)#Tags#会社紹介#自社サービス#勉強会#Rails#PHP#デザイン#実績#週刊RailsウオッチCONTACTお気軽にご相談ください。(翻訳)CONTACTTechRachoでは、パートナーシップをご検討いただける方からのご連絡をお待ちしております。お気軽にご意見・ご相談ください。