是否可以使用 Alpine.js 创建动态内联绑定？

Question

我想创建一个动态的 :class 或 :style 绑定，它使用存储在 Alpine.js 变量中的数据。

<div x-data="{ divClass: 'inner', color: 'red' }">
  <div :class="${divClass}"
       :style="background-color: ${color}"></div>
</div>

在上面的示例中，我希望divClass 变量输出动态类inner，而color 输出动态样式red — 可以吗？

Answer 1

截至 2021 年 8 月，无法直接进行。但是，有两种可能的解决方案（在 Alpine.js 存储库中的 this issue 中提到）。

老套路

您可以使用一个简单的 hack 来实现您想要的，您只需将属性的值包装在 backticks 中：

<div x-data="{ divClass: 'inner', color: 'red' }">
  <div :class="`${divClass}`"
       :style="`background-color: ${color}`"></div>
</div>

图书馆

有两个库可以帮助将动态类/样式包装在漂亮的代码中。它们是classnames 和stylenames。有了它们，代码可能看起来像这样：

<div x-data="{ divClass: 'inner', color: 'red' }">
  <div :class="classNames( divClass )"
       :style="styleNames({ backgroundColor: color })"></div>
</div>

有偏见的免责声明

在我看来，第一个解决方案更好，因为您通过不添加额外的依赖项节省了宝贵的 kB。但是，您需要考虑到它的可读性稍差，并且可能会让其他开发人员感到困惑。