カテゴリ: notes
タグ: vuejs

クラスとスタイルのバインディング|Vue.js再学習

触れないタイミングが3ヶ月あったり忘れてしまった事に焦りを感じたので、今度は勉強したことをブロクに残していきたいと思います。 内容的には公式ドキュメントの写経のようなものになります。

今日はクラスとスタイルのバインディングを見ていきます。

クラスとスタイルのバインディング

クラスとスタイルのバインディング

データバインディングに対する共通の必要なことは、要素のクラスリストとインラインスタイルを操作していることです。それら(classstyle)は両方とも属性になるので、v-bindを使用して処理することができます。(v-bindディレクティブはHTML属性をリアクティブに更新します)

しかしながら、文字列の連結に関わることは迷惑なエラーが発生しやすいので、自分たちで最終的な属性値を計算するのは負荷の高い部分になります。

この理由のため、Vueはv-bindclassstyleで使われるとき、特別な拡張を提供します。 文字列に加えて、式はオブジェクトまたは配列も評価することができます。

HTMLクラス属性のバインディング

オブジェクト構文

v-bind:classに動的に暮らすを切り替えるオブジェクトを渡すことができます。

<div v-bind:class="{ active: isActive }"></div>

上記の構文はactiveクラスが存在するかどうかを、データプロパティのisActivetrueと評価される値かによって決まることを意味します。

最初は間違いやすい部分として、渡しているのはVueのデータを展開するMustache構文ではないことに注意したいです。 オブジェクトを渡していますね。もっというとJavaScript式だということです。 忘れた場合はJavaScript 式の使用|テンプレート構文に戻りましょう。

オブジェクトに複数の項目を持たせることで、複数のクラスを切り替えることができます。加えて、v-bind:classディレクティブはプレーンなclass属性と共存できます。 次の例をみてみましょう。

<div class="static"
  v-bind:class="{ active: isActive, 'text-danger': hasError }">
</div>
data: {
  isActive: true,
  hasError: false

これは次のように描画されます

<div class="static active"></div>

isActivehasErrorが変化するとき、クラスリストはそれに応じて更新されます。 例えば、hasErrortrueになった場合、クラスリストは"static active text-danger"になります。

インラインな式を書いてオブジェクトを束縛する必要はありません。

<div v-bind:class="classObject"></div>
data: {
  classObject: {
    active: true,
    'text-danger': false
  }
}

これは同じ結果を描画します。

オブジェクトを返す算出プロパティを束縛することもできます。 これは一般的で強力なパターンです。

<div v-bind:class="classObject"></div>
data: {
  isActive: true,
  error: null
},
computed: {
  classObject: function() {
    return {
      active: this.isActive && !this.error,
      'text-danger': this.error && this.error.type === 'fatal'
    }
  }
}

配列構文

v-bind:classにクラスのリストを適用する配列を渡すことができます。

<div :class="[activeClass, errorClass]"></div>
data: {
  activeClass: 'active',
  errorClass: 'text-danger'
}

次のように描画されます

<div class="active text-danger"></div>

条件付きリストでクラスを切り替えたい場合、三項演算子でそれを行うことができます。

<div :class="[isActive ? activeClass : '', errorClass]"></div>

isActivetruthyのときだけactiveClassが適用されます。 また常にerrorClassが表示されるようになっています。

ところで、複数条件のクラスがある場合は冗長になるので、配列構文内部でオブジェクト構文が使えるようになっています。

<div :class="[{active: isActive}, errorClass]">

コンポーネントにおいて

カスタムコンポーネント上でclass属性を使用するとき、これらのクラスはコンポーネントのroot要素に追加されます。root要素上に存在するクラスは、上書きされません。

例えば、このコンポーネントを宣言して、

Vue.component('my-component', {
  template: '<p class="foo bar">Hi</p>'
})

このコンポーネントを使用するとき、いくつかのクラスを追加したとします。

<my-component class="baz foo"></my-component>

以下のHTMLが描画されます。(マージされる感じですかね)

<p class="foo bar baz boo">Hi</p>

クラスバインディングに対しても同様です

<my-component :class="{ active: isActive }"></my-component>

isActiveが真となりうるときは、以下のHTMLが描画されます。

<p class="foo bar active">Hi</p>

インラインスタイルのバインディング

オブジェクト構文

v-bind:style向けのオブジェクト構文は非常に簡単です。 それは、JavaScriptオブジェクトを除いては、ほとんどCSSのように見えます。CSSプロパティ名に対して、キャメルケース、ケバブケースのどちらでも使用することができます。

<div :style="{ color: activeColor, fontSize: fontSize + 'px' }"></div>
data: {
  activeColor: 'red',
  fontSize: 30
}

配列構文

v-bind:style向けの配列構文は、同じ要素に複数のスタイルオブジェクトを適用することができます。

<div :style="[baseStyles, overridingStyles]"></div>
data: {
  baseStyles: {
    color: 'teal',
    fontSize: '14px'
  },
  overridingStyles: {
    color: 'skyblue',
    fontWeight: 'bold'
  },
}

スタイルは以下のようにマージされて出力されます。

<div style="color: 'skyblue'; fontSize: '14px'; fontWeight: 'bold';"></div>

自動プリフィックス

v-bind: styleではプリフィックスが必要そうなCSSプロパティを、Vue.jsが自動的に検出し、適用されるスタイルに適切な接頭辞を追加してくれます。(例えば、transform)

複数の値(2.3.0から)

2.3.0からstyleプロパティに複数の(接頭辞付き)の配列を設定できます。

<div :style="{ display: ['-webkit-box', '-ms-flexbox', 'flex'] }"></div>

これはブラウザがサポートしている配列の中から最後の値だけを描画します。この例では、flexbox の接頭されていないバージョンをサポートしているブラウザでは、 display: flex を描画します。

About

はらぺこ

職業:フロントエンドエンジニア
趣味:自転車/テニス/空手
愛車:
 ✓ブリヂストン オルディナs5
 ✓アンカー RS8 EL

神戸にて爆誕。
友人から「お前がマスターして教えてくれ」と渡された『HTML&スタイルシート ポケットリファレンス』がキッカケでWeb業界への一歩を踏み出す事になる。

2013年7月にクロスバイクを購入して自転車にドハマリする。
全力で遊ぶ合間に、ほどほどに頑張る日々を過ごしています。

飼い主 はっぴー

2014年10月20日(誕生日)の引っ越し日、捨て猫になっていた所、運命の出会いを果たす。 
(その日は雨で、3日間雨が続く寒い日だった。このまま放っておけないと自転車生活と秤にかけて、はっぴーを選択する)
5時間かけて油断させ、近づいてきた所をガッと拾い上げ、そのまま家へ猛ダッシュ、玄関の鍵を閉めて家族になる。以後オレたちはファミリーだ。

助けたつもりが、実際は自分の方が精神的に救われている。はっぴーなしでは生きていけない。(最早「飼い主」と言って差し支えないだろう)

「はっぴー」という名前の由来は、『幸せになってほしい』という想いで名付けた。