如何在 vue 中使用转义字符？

Question

我想建立一个类似于codepen的网站。 我用资产（按钮、卡片、效果...）创建了一个库，并且正在使用 vue.js 构建它。 每个资产都包含 html 代码、css 代码以及必要时的 js 代码。我还想格式化该代码，在 vanilla js 中，我使用转义字符（\n、\t）进行了格式化。 不幸的是，这在 vuejs 中不起作用。

听起来很奇怪，但是输出应该是格式化的html代码。 这是一个确实有效的字符串 vanilla js 示例：

'<button class="btn">Button 1 - Red hover effect</button>\n<button class="btn">Button 1 - Red hover effect</button>';

这是输出：

<button class="btn">Button 1 - Red hover effect</button>
<button class="btn">Button 1 - Red hover effect</button>

我想构建相同的东西，但使用 vue。

有人知道这个问题的解决方案吗？

Answer 1

可以使用v-htmlapi

在您的网站上动态呈现任意 HTML 可能非常危险，因为它很容易导致 XSS 攻击。仅对受信任的内容使用 v-html，从不对用户提供的内容使用。