在 Vue 应用程序中渲染原始 HTML

虽然这并不常见,但有时实际上有必要将原始HTML存储为字符串插入DOM的一个很好的理由。很少,当然,在大多数情况下,你永远不应该这样做,因为这会为你打开各种XSS攻击。一个相当有效的使用案例可能是,如果你正在为一个古老的遗传系统写一个新的前端组件(shudders)将HTML与数据混合到一个老旧的数据库中,在某些租赁设施的长期遗忘的服务器空间中。

第一件事,先打破你的 RegEx技能...

我宁愿不冒着已知宇宙的命运的风险,只是为了容纳一个遗传系统。

无论如何,事实证明Vue为我们提供了一个可爱的小指令,可以为我们处理这一切,可以预测,它被称为v-html。

要使用它,请将数据模型中的 HTML 字符串引用到组件模板中的v-html,如下:

 1<template>
 2  <div v-html="legacySystemHTML">
 3  </div>
 4</template>
 5
 6<script>
 7export default {
 8  data() {
 9    return {
10      // Just like JSX! Oh wait...
11      legacySystemHTML: `
12        <FONT color="#faddad" size="-2">
13          <MARQUEE>Please enter your name to continue.</MARQUEE>
14          ...
15        </FONT>
16      `
17    }
18  }
19}
20</script>

如果你更新了legacySystemHTML属性,HTML将相应地更新。

不是坏!

您可以以相同的方式使用v-text属性,但它只设置了元素的文本内容。

...

不知道为什么你会使用它,当你可以只是使用Mustache表达式({ componentInnerText }})而不是,但它在那里!