VueJS / Tailwind中的动态类+变量

Question

我试图在Tailwind类上添加动态变量(Prop)，但有些地方出错了：

: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变量切换类，则必须使用object方式。

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