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

Question

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

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

在上面的示例中，我希望 divClass 变量输出动态 class 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>

图书馆

有两个库可帮助将动态 classes/styles 包装在美观的代码中。他们是classnames and stylenames。有了他们，代码可能看起来像这样：

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

有偏见的免责声明

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

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

Is it possible to create dynamic inline bindings with Alpine.js?

javascript

css

alpine.js

骇人听闻的方式

图书馆

有偏见的免责声明