从 getBoundingClientRect 获取高度并将其作为样式应用 alpine.js

Question

我正在学习 alpine.js 并掌握基本的 x-show 和 class 绑定。现在我要处理一些稍微复杂一些的事情。例如，我在这里获取 div 的高度并将其记录到控制台：

<div x-data="{ imgHeight: $el.getBoundingClientRect().height }"
     x-init="console.log(imgHeight)">
</div>

这很好用，但现在我想取值 imgHeight 并将其用作高度 class。

这是我有点困惑的地方，我不能做像 :class="imgHeight" 这样没有意义的事情，因为 imgHeight 值不是 class。这样的事情也行不通 :style="{ height: 'imgHeight'px }.

所以我的感觉是它与 getter 和 setter 有关，我需要将图像高度的值设置为 class 并获取 class 名称并绑定它。如果是这样的话，我不确定如何构建它。很想得到一些指导。

Answer 1

您缺少的关键点是 Alpine.js 指令中的所有内容都只是 JavaScript，因此您可以只写 height: imgHeight + 'px' 或使用模板文字：

:style="{height: `${imgHeight}px`}

您可以在指令中随意编写任意多的 JS 代码。当它们变得太长而无法就地阅读它们时，将它们重构为 getter 和其他方法是有意义的 and/or 你想重用一个组件。但是对于这些小任务，将 JS 直接写入 Alpine.js 指令是完全没问题的。

Get height from getBoundingClientRect and apply it as a style with alpine.js