wire:bind

wire:bind 是一个将 HTML 属性动态绑定到组件属性或表达式的指令。与使用 Blade 的属性语法不同，wire:bind 在客户端响应式地更新属性，无需完整重新渲染。

如果你熟悉 Alpine 的 x-bind 指令，这两者本质上是相同的。

基本用法

<input wire:model="message" wire:bind:class="message.length > 240 && 'text-red-500'">

当用户输入时，wire:bind:class 会对消息长度做出反应，并立即在客户端应用该类。

常见用例

绑定样式

<div wire:bind:style="{ 'color': textColor, 'font-size': fontSize + 'px' }">
    Styled text
</div>

绑定 href

<a wire:bind:href="url">Dynamic link</a>

绑定禁用状态

<button wire:bind:disabled="isArchived">Delete</button>

绑定 data 属性

<div wire:bind:data-count="count">...</div>

参考

wire:bind:{attribute}="expression"

将 {attribute} 替换为任何有效的 HTML 属性名称（例如，class、style、href、disabled、data-*）。

此指令没有修饰符。