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

Question

For example when i use the scope i write the template with the scope rules, and the code will be

<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>

but when i use the css modules, i try the code style like

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

or that

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

or like that

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

I wonder what's the right way to do?

Answer 1

Is this what you want? Don't put $style.red inside string '$style.red' , instead if you want to interpolate it, use [$style.red] . $style.red works jut like normal javascript variable.

<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>