Help us understand the problem. What is going on with this article?

Vue.jsでtemplateでclassを複数定義したいならこうしよう

More than 1 year has passed since last update.

結論

Vue.jsでこんな感じでかけます

<template lang="pug">
.hoge-container
  .box-wrapper(:class="[propsClass, { active: isActive }]")
</template>

<script>
export default {
  name: 'hoge-container'
  props: {
    propsClass: {
      type: String,
      required: false,
    },
    isActive: {
      type: Boolean,
      required: true,
    }
  }
}
</script>

説明

この書き方の場合、 propsClass には class名が String で渡ってきたら、そのまま classに入る。そして、 isActivetrue で渡ってきたら、 active クラスが付与される。

補足:これでもok

<template lang="pug">
.hoge-container
  .box-wrapper(:class="[propsClassA, propsClassB, propsClassC]")
</template>
<template lang="pug">
.hoge-container
  .box-wrapper(:class="{active: isActive, big: isBig}")
</template>
shogotgm
型安全なフロントエンジニア
atrae
People Techカンパニーとして、転職サイトGreen, ビジネスマッチングアプリyenta, 組織改善プラットフォームwevoxなどのサービスを運営。全ての社員が誇りを持てる組織と事業の創造にこだわり、関わる人々がファンとして応援したくなるような魅力ある会社であり続けることを目指しています。
https://atrae.co.jp/
Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away