如何使用alpine.js正确添加和删除元素

Question

我想根据屏幕大小(移动和桌面)完全隐藏我的元素，而不仅仅是给它display: none，所以我在alpine.js中使用了x-if

<template x-if="window.innerWidth < 768 ? false : true">
  <div>
    <a href="$">Hidden Link</a>
  </div>
</template>

在屏幕上，看起来肚脐条被删除了，但是当我确定并为它创建一个测试用例时，它就失败了。网络驱动程序仍然可以识别隐藏的链接。那么，如何根据用户屏幕大小(桌面-移动)使用alpine.js添加和删除元素呢？

Answer 1

若要根据屏幕大小从页面中完全删除元素，可以使用x-if指令和x-transition:leave属性将元素从页面中删除。这将从页面中删除元素，其内容将不再出现在页面的HTML代码中。下面是一个如何做到这一点的例子：

<template x-if="window.innerWidth < 768" x-transition:leave="transition duration-500">
  <div>
    <a href="$">Hidden Link</a>
  </div>
</template>