v-html与v-text

这两个指令用于特殊类型的内容渲染。

v-html

<div v-html="rawHtml"></div>

data() {
  return {
    rawHtml: '<span style="color: red">红色文字</span>'
  }
}

v-html 将内容作为 HTML 插入，而非纯文本。

安全警告：对不可信内容使用 v-html 可能导致 XSS 攻击。永远不要对用户输入直接使用 v-html。

v-text

<span v-text="message"></span>

等价于：

<span>{{ message }}</span>

v-text 更新整个元素的 textContent。

对比

要点总结

• v-html 插入原始 HTML，动态解析标签
• v-text 设置文本内容，等价于插值表达式
• v-html 仅用于可信内容
• 插值表达式是更常用的文本绑定方式