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

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

VueやNuxtを使っていて、普通の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"
>

まとめ

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

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