ツイート静的なclass(通常のclass)動的なclass(v-bind:class):classの使い方1.dataが条件に合えばclassを付与2.dataが条件に合えばclass1、合わなければclass2を付与3.付与するクラス名の一部にdataを用いるおわりにこんにちは!今日はVueの動的クラス(:class)の書き方3通りについて紹介します。静的なclass(通常のclass)通常のclassを用いる方法は通常のhtml、cssと全く同じよ。red;}動的なclass(v-bind:class)動的なclass(dataによって値が変わるclass)を用いるにはv-bind:classを用います。できるのでこんな風に書けます。:class='"red"'>あとv-bind系で文字列を使う場合はクォーテーションの中に更にクォーテーションが必要なので注意!↓だとエラーになるよ。:class='red'>vueで:classを使う時は、dataの値によってclassを選択するような場面が多いんじゃないかなって思います。dataは↓のような書き方するやつ。})}:classの使い方1.dataが条件に合えばclassを付与dataが条件に合えばclassを付与、合わなければ何も付与しない書き方です。data「one」の値が1ならclass「color–one」を付与するにはこんな感じ。クラス名をクォートで囲むの忘れがちなので注意。2.dataが条件に合えばclass1、合わなければclass2を付与そのまんま。これが一番使わないかも。data「one」の値が1ならclass「color–one」、じゃなければ「color–not-one」付与するにはこんな感じ。3.付与するクラス名の一部にdataを用いるこれめっちゃ使えるけど公式ドキュメントに載ってない。color–【dataの値】みたいなクラス名にするにはこう。:class='`color--${data}`'>おわりに特に3.はめっちゃ使えると思うので使ってみてくだされ。1と3を混ぜるみたいな使い方もできるけどあんまりやると可読性悪くなるので注意。Others2019-09-17WordPressが嫌でNuxt.js+Contentfulでブログを作ったけどHugoに移行した話-前編JavaScript2019-09-08【JS】ユーザーエージェントでiPadを判別(iPadOS対応版)Others2019-09-04ブログリニューアルTAGSタグjavascriptcssothersmathpythonhtml当サイトでは、Googleによるアクセス解析ツール「Googleアナリティクス」を利用しています。このGoogleアナリティクスはトラフィックデータの収集のためにCookieを使用しています。このトラフィックデータは匿名で収集されており、個人を特定するものではありません。この機能はCookieを無効にすることで収集を拒否することが出来ますので、お使いのブラウザの設定をご確認ください。