Tech Racho エンジニアの「?」を「!」に。
  • 開発

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・簡単な導入方法・デバッグ・結果の表示とメモ化


CONTACT

TechRachoでは、パートナーシップをご検討いただける方からの
ご連絡をお待ちしております。ぜひお気軽にご意見・ご相談ください。