Question

在应用程序的特定部分，我需要获取Vue生成的HTML代码并将其发送到我的API。

问题是：Vue将data-*属性添加到所有HTML元素。如何在所有导出的HTML中删除此属性？

console.log(this.$refs.template.$el.outerHTML)

返回：

<table data-v-2cacc920="" class="body" style="background-color: rgb(255, 255, 255); color: rgb(25, 25, 25); font-size: 14px;"><tbody><tr><td align="center" valign="top" class="float-center"><center><table align="center" class="container"><tbody><tr><td><div data-v-2cacc920="" class="columns-drop-area" style="background-color: rgb(255, 255, 255); padding: 0px;"><table data-v-2cacc920="" class="row"><tbody><tr><th data-v-2cacc920="" class="columns large-6 small-12 first"><table><tbody><tr><th><div data-v-2cacc920="" class="components-drop-area" style=""><div data-v-2cacc920="" class="item" style="border-radius: 0px; padding: 0px; font-size: 14px;"><p data-v-2cacc920="">Lorem ipsum dolor sit amet.</p></div></div></th></tr></tbody></table></th><th data-v-2cacc920="" class="columns large-6 small-12 last"><table><tbody><tr><th><div data-v-2cacc920="" class="components-drop-area"></div></th></tr></tbody></table></th></tr></tbody></table></div></td></tr></tbody></table></center></td></tr></tbody></table>

如何从所有HTML中删除data-v-2cacc920=""？

请记住，此属性是动态的，并且始终在变化...

我认为这种情况的一种可能性是在包含所有元素的循环内使用正则表达式，但是我对正则表达式= /

一无所知

类似的东西：

this.$refs.template.$el.querySelectorAll('*')

Answer 1

您可以通过访问this。$ refs.template。$ el.attributes（返回一个NamedNodeMap）来获取所有属性的列表。

如果您知道这些数据属性以某个前缀开头，则可以执行以下操作

const prefix = 'data-v';
for (const attribute of [...this.$refs.template.$el.attributes]) {
   if (attribute.name.startsWith(prefix)) {
     this.$refs.template.$el.removeAttribute(attribute.name);
   }
}

Javascript-删除动态属性

1 个答案: