Question

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

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

或者那个

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

或类似的

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

我想知道正确的方法是什么？

Answer 1

这是您想要的吗？不要将$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>

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

1 个答案: