サンプルコードから基礎を学ぶ！Vue.js入門講座！【CSS適用編】

今回はこのような質問をいただきました。

Vue.jsからクラスを適用するにはどうしたら良いんだろう？
style属性も適用できるのかな？

今回は動的にクラスやインラインスタイルを適用してみます。

超初心者向けVue.js入門講座です。

一緒にVue.jsを勉強して、Vue.jsを楽しみましょう！

動的にクラスを適用してみよう！

Vue.jsからクラスを適用したい！

こんなことを思った方もいるのではないでしょうか？

そこで今回は、Vue.jsから動的にクラスを適用する方法について解説します。

まずはVue.jsを使わない場合のクラスの適用方法について見てみましょう。

text-color, bg-colorというクラスを用意してみました。

こちらはHTMLとCSSを理解していれば何も問題ないと思います。

ではこちらのクラスをVue.jsから適用してみましょう！

適用する方法は2つあるので1つずつ見ていきます。

オブジェクトを使用する方法

このようにオブジェクトを使用して、boolean型で有効にするかどうかを指定します。

今回の場合はtext-colorがtrueとなっているので赤色で文字が表示されていますね。

ボタンを追加して値を切り替える

この値を切り替えられるようにすることで、動的にクラスを適用できるようになります。

ボタンを押すことで切り替えられるようにしてみました。

これで動的になりましたね。

オブジェクトをJSに定義する

また、このオブジェクトはJS側に書くこともできます。

その場合にはcomputedプロパティを使用します。

注意としてはVueインスタンス内でdataプロパティを呼び出す場合はthisが必要なことです。

忘れないように注意しましょう！

配列を使用する方法

このようにして配列を渡してあげることで適用することも可能です。

こちらはHTMLで適用する方法に似ているので簡単ですね。

配列の中でオブジェクトを使用する

このようにして配列の中でオブジェクトを使用することもできます。

片方だけ動的にすることも可能です。

動的にインラインスタイルを適用してみよう！

インラインスタイルとはstyle属性を使用して直接スタイルを適用するものです。

まずはVue.jsを使わない方法について見てみましょう。

このように非常にシンプルにスタイルを適用することができます。

ではこちらをVue.jsを使ってバインディングしてみましょう。

classと同じでオブジェクトを使用する方法と配列を使用する方法の２つがあります。

オブジェクトを使用する方法

今回はbooleanではなく、Stringを指定します。

非常にCSSと似ているのでわかりやすいですね。

こちらもclassと同様にJS側に定義することができます。

オブジェクトをJSに定義する

このようにJS側に定義することも可能です。

一般的にはHTMLに直接書き込むより、JS側に切り出したほうが良いとされています。

動的にインラインスタイルを適用する場合は、このように適用しましょう。

配列を使用する方法

配列を使用することで複数のオブジェクトをスタイルに適用することができます。

配列を使用して複数のオブジェクトを適用してみましょう。

boldStyleという新しいオブジェクトを定義して適用してみました。

こちらは対象のテキストを太字にするオブジェクトです。

実際に色も設定されている上に太字になっていますよね。

このように複数のオブジェクトを適用したい場合は配列を使用します。

まとめ

動的にCSSを適用する方法はいくつかあります。

この中でどの方法が一番良いのか見極める必要がありますね。

一般的にはJS側に定義することが多いです。

特にこだわりがなければJS側に定義しましょう！

動的にCSSを適用して、すばらしいデザインのウェブページを作ってみてください！