vueやnuxtで普通のclassとバインドするclass両方合わせて使いたい時

Nuxt

普通のclassとバインドするclassを両方合わせて使いたい

VueNuxtを使っていて、普通のclassバインドするclass両方合わせて使いたい時がありましたので、備忘録として残しておきます!

やり方

やり方の例

やり方は簡単で、以下の例のように、:classの方とclassをそのまま合わせて使えました!

:class="{ 'on-hover': hover }"
class="testClass"

サンプルコード

以下がサンプルコードになります。

こんな感じで、普通のclassバインドするclassを両方使っても動作することができました!

<v-card
  :elevation="hover ? 12 : 2"
  :class="{ 'on-hover': hover }"
  class="testClass"
  :href="item.link"
>

まとめ

今回は、vuenuxtで普通のclassとバインドするclass両方合わせて使いたい時について書きました!

ふとしたときに、どうやるんだっけ?となるので、そうなったらこの記事を見返したいと思います。

Note一覧

コメント