VueJS / Tailwind 中的动态类 + 变量

Posted 2023-03-07

【中文标题】VueJS / Tailwind 中的动态类 + 变量

【英文标题】：Dynamic class + variables in VueJS / Tailwind

【发布时间】：2021-02-17 15:04:44

【问题描述】：

我正在尝试在 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'。

感谢您的帮助。

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

【问题讨论】：

当 true 消失时，你会得到你想要的吗？

如果我删除：$show 是的，但我需要这个来进行转换（show 的值取决于滚动位置）。

如果我使用 v-if='show' 作为 ex，它会起作用，但没有想要的过渡。

对不起，我不熟悉顺风，我想了解您想在 $show 中看到什么？只显示？

【参考方案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>