Javascript [vue]：如何在vue中的同一元素上使用css模块和普通类css添加动态类？

例如，当我使用范围时 我用范围规则编写模板，代码将

<div
  class="item ripple"
  v-show="tabList.length > 0"
  :class="{'item-on':currentTabActive==index}"
  v-for="(item,index) in tabList"
  :key="index"
  @click="checkTab(index)"
  >
</div>

但是当我使用css模块时，我会尝试下面的代码样式

<div :class="[{'$style.red': true},'$style.bold']">hhhhhh</div>

hhhh

或者

<div :class="{'$style.red': true},'$style.bold'">hhhhhh</div>

hhhh

还是那样

<div :class="{'$style.red': true, '$style.bold'}">hhhhhh</div>

hhhh

---

我想知道正确的方法是什么？这是你想要的吗？不要将

$style.red

放入字符串

'$style.red'

中，如果要插入它，请使用

[$style.red]

<代码>$style.red的工作原理与普通javascript变量类似

<div 
  v-show="tabList.length > 0" 
  :class="[
    'item', 
    'ripple', 
    {[$style.red]: isRed}, 
    $style.bold, 
    {'item-on': currentTabActive==index}
  ]"
  v-for="(item,index) in tabList" 
  :key="index"
  @click="checkTab(index)">
</div>

---

你的问题进展如何？你解决问题了吗？