在 Alpine.js 中将类绑定到 $el.value

Posted 2023-03-07

【中文标题】在 Alpine.js 中将类绑定到 $el.value

【英文标题】：binding class to $el.value in Alpine.js

【发布时间】：2021-11-08 08:17:01

【问题描述】：

好的，我只是在 Codepen 中与 Alpine 一起玩，了解一些事情的窍门，但我不知道我在这里做错了什么。使用此示例输入，当我单击它时，它会在文本框中正确记录值。如果我在 :class 属性中放置一个不同的变量，它就可以正常工作。但我无法让它根据我在文本框中输入的内容来应用类。我想这在现实世界中没有用处，但我想了解我做错了什么。

<input type="text" :class="$el.value" @click="console.log($el.value)" />

【参考方案1】：

目前，您的文本框没有连接到 Alpine 的内部状态管理，而是由 DOM 处理，它本身没有“反应性”的概念。因此，如果您更改元素的值，Alpine 不知道它应该“重新渲染”该组件。

来自 Alpine 的文档：

Alpine 是“反应式”的，因为当您更改一段数据时，依赖于该数据的所有内容都会自动“响应”该更改。

文本框的值本身不是响应式的，即不连接到 Alpine 的内部状态管理。对于要连接到 Alpine 状态变量的文本框值，您可以使用 x-model 指令。

x-model 是双向绑定的，这意味着它既“设置”又“获取”。除了改变数据之外，如果数据本身发生变化，元素也会反映变化。

这是一个工作示例：

<script src="//unpkg.com/alpinejs" defer></script>

<style>
  .red 
    color: red;
  
  
  .bg-yellow 
    background-color: yellow;
  
</style>

<input type="text" :class="clsText" x-data="clsText: 'red bg-yellow'" x-model="clsText" />

【讨论】：

谢谢。所以 $el 在这种情况下甚至不起作用。