动态 class + VueJS / Tailwind 中的变量

Question

我正在尝试在 Tailwind 上添加动态变量（props）class，但出了点问题：

: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'。

感谢您的帮助。

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

Answer 1

因为您使用 returns string 的模板文字。所以 show 是布尔值 true 并且它 returns "true" 作为字符串。

如果要根据show变量切换class，必须使用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>

动态 class + VueJS / Tailwind 中的变量

Dynamic class + variables in VueJS / Tailwind

variables

dynamic

vue.js

tailwind-css