在 alpine.js 中组合 x-show 和 x-text 切换

Question

我是 alpine.js 的新手，我需要切换一个元素的 innerText，有谁知道我可以结合显示一个元素和更改另一个元素的 innerText 吗？这是我的代码

<div x-data="{ numOrder: false, delNumOrder: 'Remove your order number' }">
  <button x-on:click="numOrder = !numOrder">
  Insert your order number</button>
  <input x-show="numOrder" type="text" placeholder="Order Number">
</div>

我需要通过 delNumOrder 覆盖按钮文本，我尝试使用 x-text :

<button x-on:click="numOrder = !numOrder" x-text="delNumOrder = !delNumOrder">

我可以使用类似吗？

<div x-data="{ numOrder: false, delNumOrder = delNumOrder ? 'Insert your order number' : 'Remove your order number' }"></div>

Answer 1

您可以在 x-text 中使用表达式，在本例中为文本的三元表达式：numOrder ? 'Remove your order number': 'Insert your order number'。您可能想要执行以下操作：

<div x-data="{ numOrder: false }">
  <button
    x-on:click="numOrder = !numOrder"
    x-text="numOrder ? 'Remove your order number': 'Insert your order number'"
  ></button>
  <input x-show="numOrder" type="text" placeholder="Order Number">
</div>

在 alpine.js 中组合 x-show 和 x-text 切换

Combine x-show & x-text toggle in alpine.js

web-frontend

alpine.js