Vue.js入門第14回。今回はclassやstyle属性をデータバインディングで操作してみます。
はじめに
今回はclass属性やstyle属性（インラインスタイル）をデータバインディングを使って操作してみたいと思います。
class属性はv-bind:class、style属性はv-bind:styleでデータバインディング出来ます。
ソースコード
Javascript
dataプロパティに出し分け用のフラグやCSSパラメータなどを定義しています。詳細はHTMLで説明します。
HTML
①はlargeクラスをisLargeプロパティで切り替えています。isLargeプロパティがtrueの場合はlargeクラスが適用され、「Vue.js」の部分のフォントが大きくなります。
②は①の複数指定バージョンで、hasErrorプロパティがtrueの場合はtext-dangerクラスが適用され、フォントサイズに加え赤字になります。
③はプレーンなclass属性で指定しつつ、データバインディングでも指定しています。プレーンなclassを併用することも可能です。
④はdataプロパティにクラス名を定義したプロパティを、配列で複数指定しています。
⑤はdataプロパティに定義したclassの設定をデータバインディングで適用しています。真偽値に応じて、largeクラスとtext-dangerクラスが適用されます。
⑥は三項演算子を利用してisLargeフラグがtrueの場合はlargeクラスを直接指定し、falseの場合はsmallClassプロパティを指定して結果的にsmallクラスが付与されています。classを直接指定することも可能です。
⑦はインラインスタイルでCSSを適用しています。
⑧はインラインスタイルでdataプロパティに定義されたCSSを適用しています。
class名を直接データバインディングすることも可能ですし、dataプロパティにあらかじめ定義しておいてまとめて適用することも可能です。設計が難しくなりますが統一すると良さそうですね。
えず
東京でフリーランスのWebエンジニアやっています。 今はPHPとGoをメインに、プライベートでは広く浅くをモットーにフロント〜インフラまで学習しています。 当面の目標はDevOps寄りのオールラウンダー。
