如何用AlpineJS动态添加/移除元素的removeExport属性？

完全可以用AlpineJS的x-bind指令简洁实现这个需求，不用原生JS介入。

核心实现代码 #

直接给<td>加上动态属性绑定，和你控制invisible类的逻辑完全一致：

<td 
  :class="{'invisible': viewSwitcher.activeType !== 'production'}"
  x-bind:removeExport="viewSwitcher.activeType !== 'production'"
>
  Cell Content
</td>

原理说明 #

AlpineJS对布尔属性的处理很智能：

• 当绑定的表达式结果为true时，会自动渲染出removeExport属性（这类布尔属性只要存在就生效，不需要赋值）
• 当表达式结果为false时，会自动移除该属性

完美匹配你的需求：单元格隐藏时（viewSwitcher.activeType !== 'production'为true），自动添加上removeExport让导出插件忽略；显示时自动移除该属性，正常导出。

特殊情况兼容（如果插件要求属性带值） #

如果你的导出插件要求必须写成removeExport="true"这种带值的形式，也可以调整绑定逻辑：

<td 
  :class="{'invisible': viewSwitcher.activeType !== 'production'}"
  x-bind:removeExport="viewSwitcher.activeType !== 'production' ? 'true' : null"
>
  Cell Content
</td>

当表达式为false时赋值null，Alpine会自动不渲染这个属性。

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