虽然这并不常见,但有时实际上有必要将原始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 }}
)而不是,但它在那里!