VueJS / Tailwind 中的动态类 + 变量

Question

我正在尝试在 Tailwind 类上添加动态变量（道具），但出现了问题：

:class="`w-${percent}/12: ${show}`"

这是这段代码的输出：

<div class="w-0 h-2 transition-all duration-1000 ease-out bg-indigo-600 rounded-lg w-11/12: true"></div>

我不明白为什么添加'：true'。

感谢您的帮助。

注：https: //fr.vuejs.org/v2/guide/class-and-style.html

Answer 1

因为您使用返回string. show布尔值也是如此true，它"true"以字符串形式返回。

如果你想根据show变量切换类，你必须使用objectway。

<div
  class="w-0 h-2 transition-all duration-1000 ease-out bg-indigo-600 rounded-lg"
  :class="{ [`w-${percent}/12`]: show }"
>
  YOUR CONTENT
</div>