gpt4 book ai didi

AlpineJS: Conditionally add/remove attribute name?(AlpineJS:有条件地添加/删除属性名称?)

转载 作者:bug小助手 更新时间:2023-10-27 19:49:02 24 4
gpt4 key购买 nike



I've got a table where certain columns/cells are displayed or hidden based on a switcher using the Alpine :class directive:

我已经得到了一个表,其中某些列/单元格是根据使用alPine:CLASS指令的切换器显示或隐藏的:


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

单元格内容


These cells are also exportable using jQuery plugin which provides a removeExport attribute that can be added to an element so that the exporter ignores it.

这些单元格也可以使用jQuery插件导出,该插件提供了一个可以添加到元素中以便导出器忽略它的emoveExport属性。


When a column/cell is hidden, I'd like to add the removeExport attribute to the element so that it isn't exported.

当列/单元格被隐藏时,我想向元素添加emoveExport属性,这样它就不会被导出。


I know that I can do this with vanilla Javascript but I was wondering if it was possible to this with Alpine in a cleaner, more streamlined manner similar to how x-bind can dynamically add/remove attribute values?

我知道我可以用普通的Java脚本来做到这一点,但我想知道,是否有可能用阿尔卑斯以一种更干净、更精简的方式来做到这一点,就像x-Bind如何动态地添加/删除属性值一样?


更多回答
优秀答案推荐

You haven't given the plugin name and "provides a removeExport attribute that can be added to an element so that the exporter ignores it" seems a bit unusual.

您还没有给出插件的名称,并且“提供了一个可以添加到元素中以便导出器忽略它的emoveExport属性”看起来有点不寻常。


To toggle an attribute with Alpine you can x-bind it and assign a false value to it if you don't what that attribute (in the following example I use the shorthand notation for x-bind):

要使用Aline切换属性,您可以对其进行x绑定,如果您不了解该属性的内容,则为其指定一个FALSE值(在下面的示例中,我使用了x绑定的简写表示法):


<td :removeExport = "viewSwitcher.activeType !== 'production'" :class="{'invisible': viewSwitcher.activeType !== 'production'}>

At this point can be useful adding a function in the x-data, that returns true if we are not in production (<root-tag> is the tag where you defined x-data):

此时,在x-data中添加一个函数非常有用,如果我们不在生产中,该函数将返回TRUE( 是您定义x-data的标记):


<root-tag x-data="{viewSwitcher: {activeType: 'production'}, isNotProduction: function() { return this.viewSwitcher.activeType !== 'production';} }">

and then in your <td>:

然后在您的中:


<td :removeExport="isNotProduction()" :class="{'invisible': isNotProduction()}">

更多回答

24 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com