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

Posted 2023-02-18

【中文标题】在 alpine.js 中结合 x-show 和 x-text 切换

【英文标题】：Combine x-show & x-text toggle in alpine.js

【发布时间】：2021-01-05 07:32:50

【问题描述】：

我是 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>

【参考方案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>

【讨论】：

是的，正是 ;-)