Vue.js【クラスとスタイルのバインディング】

Vue.js【クラスとスタイルのバインディング】

クラスのバインディング

v-bind:classにオブジェクトを渡すと、クラスを動的に切り替えることが可能になります。

See the Pen dyyvpJm by すず@progateでお勉強はじめました (@hpsuzucat) on CodePen.

上記の例で行くと、初期値では文字色を適用するクラス、背景色を適用するクラスがそれぞれ割り当たっており、

それはhasPutColorとhasPutBgColorの真偽値がtrueのときのみ適用されるクラスになります。

ボタンをクリックすることでそれぞれの真偽値がfalseになるので、クラスの適用が外れ、文字色、背景色それぞれが初期値に戻ることが確認できるとかと思います。

See the Pen rNNyjjR by すず@progateでお勉強はじめました (@hpsuzucat) on CodePen.

カンマ区切りで複数のクラスの指定が可能になります。

See the Pen qBBrRva by すず@progateでお勉強はじめました (@hpsuzucat) on CodePen.

このように記述することもできます。Changeオブジェクトのred.boldの真偽値がtrueなので、赤い太文字で表示されています。

See the Pen eYYvgVa by すず@progateでお勉強はじめました (@hpsuzucat) on CodePen.

Changeオブジェクト内の真偽値をクリックイベントで切り替えることもできます！Change.Red,Change.boldのように記述します

配列でクラスを指定する

See the Pen PoopWgR by すず@progateでお勉強はじめました (@hpsuzucat) on CodePen.

配列構文でクラスを指定することができます。

配列の要素はVueインスタンスのプロパティを指定するようにしてください。

コンポーネントでの使用

See the Pen jOOBBOR by すず@progateでお勉強はじめました (@hpsuzucat) on CodePen.

コンポーネントでも同じように指定することができます。

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

See the Pen mddWWxz by すず@progateでお勉強はじめました (@hpsuzucat) on CodePen.

v-bind:styleを使用することでスタイルを指定することができます。

上記では、スタイルオブジェクトを指定しています。

background-colorといった、途中にハイフンを含むようなプロパティの場合はクォートで括る必要があるようです。

これは、JavaScriptがそもそも変数や関数名にハイフンを含めることができない仕様であるためだと思われます。

JavaScript:【注意】変数や関数の名前には-ハイフンは使えない

スタイルの配列指定

See the Pen yLLMMQJ by すず@progateでお勉強はじめました (@hpsuzucat) on CodePen.

そしてこちらにも配列を使用することで複数指定が可能です！

おまけ　ハマった…

See the Pen MWWppRb by すず@progateでお勉強はじめました (@hpsuzucat) on CodePen.

var MyComponent = Vue.extend({
  template: '<div :class="[redClass, {bold:isBold}]">Hello!</div>'
})

と書こうと思ったのですが、どうやらこの書き方はできないようです…

おまけ２

途中から書き方が変わっていますが、

v-bind:xxxは:xxx、

v-on:clickは@click

と書くことができます！頻出する処理を短く記述できるのは素敵ですね！