Vue.jsサンプルコード(08)入力したカラーコードをリアルタイムでプレビューする

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:style="{ fontSize: size + 'px' }">
<!-- 省略記法 -->
<img :style="{ fontSize: size + 'px' }">

1つ以上の属性またはコンポーネントのプロパティと式を動的に束縛します。
class または style 属性と束縛する場合、配列やオブジェクトのような追加の値タイプをサポートします。詳細は下記にリンクしたガイドセクションを参照してください。
api/#v-bindより

配列やオブジェクトなどの値タイプも使えるようになるところがタイトルで言う「魔法」です。

Vue.jsで処理された後は普通のclass属性やstyle属性に変わります。

HTMLタグで通常の属性の代わりに:class:styleを使うことで、HTMLのコンテンツでVue.jsの{{ }}を使えるのと似た要領で、配列やオブジェクトも使って属性を動的に変更できるようになります。ERBの<%= ... %>やPHPの<?php ... ?>より場所を取らないので属性をすっきりと動的にできます。

なおv-bindを直接使うなどしてもっといろいろできますが、やりすぎ注意です。

<!-- 属性のオブジェクトのバインディング -->
<div v-bind="{ id: someProp, 'other-attr': otherProp }"></div>

おまけ: <input>type='number'について

公式ドキュメントによると、<input>タグでtype='number'を付けると自動で数値に型変換されるとありますが、実際は数値への型変換はtype='number'なしでも行われます。
したがって、そのままcomputedで計算できます。

サンプルコード06で、以下のようにHTML属性のtype='number'を削除しても動作します。

<input class='form-control' type='number' v-model='b'>
↓
<input class='form-control' v-model='b'>

その代わりサンプルコード06は数値以外の文字も入力できるようになってしまい、文字を入力すると計算結果もNaNになってしまいますが。


バックナンバー(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探訪シリーズ