如何用AlpineJS在calculate()返回null时隐藏span元素？

你可以通过AlpineJS的x-show指令实现这个需求，给目标span元素添加判断条件，当calculate()返回null时自动隐藏它：

1. 修改span元素，添加x-show="calculate() !== null"属性，确保仅当calculate()返回非null值时才显示该元素：

<p><span x-text="calculate() + '€'" x-show="calculate() !== null"></span>per session</p>

2. 如果需要同时兼容null和undefined的场景，可将条件调整为x-show="calculate() != null"（双等号会同时匹配null和undefined）。

修改后的完整代码 #

HTML部分：

<div x-data="pricing()" x-init="data = { plan: 'a' }">
  <p><span x-text="calculate() + '€'" x-show="calculate() !== null"></span>per session</p>
  <select x-model="data.plan">
    <option value="a">A</option>
    <option value="b">B</option>
  </select>
</div>

JS部分：

export default function pricing() {
  return {
    data: {
      plan: "",
    },  
    calculate() {
      if (this.data.plan == "a")
        return 20;
      if (this.data.plan == "b")
        return 30;
      // 示例返回null的场景
      return null;
    }
  }
}

内容的提问来源于stack exchange，提问作者Miguel Moura