【Nuxt.js・TailwindCSS】条件によって動的にクラスを付与する方法

はじめに

こんにちは。
こちらの記事では、動的にクラスを付与する方法を記しています。
誤っている点がございましたらコメントいただけると幸いです。

実装手順

バインドしたクラスbuttonColorに対して、computedを使用することで条件ごとにTailwindCSSのクラスを変更する実装を行います。

template

<button v-bind:class="buttonColor">
  送信
</button>

script

export default {
  data: function () {
    return {
      formData: ""
    };
  },
  computed: {
    buttonColor: function () {
      return {
        "bg-gray-200": this.formData === "" ,
        "bg-red-500": this.formData !== "",
      };
    },
  },
}

フォームに何も入力されていないときはbg-gray-200を適用してボタンの背景色を変更する。フォームにデータが入力されている場合は、bg-red-500を適用する。
computedでは、データの参照にはthisを使用してreturnで値を返す。

参考

• クラスとスタイルのバインディング
• computed で classを動的に指定

おわりに

ここまで動的にクラスを付与する方法についてまとめました。
これからも転職活動と並行してアウトプットも継続しながら、技術力の向上に努めていきます！

以上、最後まで読んでいただきありがとうございました！
よければLGTMを押してくれると嬉しいです！