Vue:显示数据

Vue 提供了两种直接操作文本内容的方式：v-text 和 v-html。它们都能将数据渲染到页面上，但处理方式有本质区别。通过代码示例理解它们的特性和使用场景。

---

v-text：纯文本输出

与插值表达式 {{ }} 完全等价，将数据作为纯文本输出。适合常规内容展示。

<template>＜div＞<!-- 等价于 {{ message }} --><p v-text="message"＞＜/p＞<!-- 会忽略 HTML 标签 --><p v-text="rawHtml"＞＜/p＞  <!-- 页面显示 <b＞Hello＜/b＞ -->＜/div＞
</template＞<script＞
export default {data() {return {message: "普通文本",rawHtml: "<b＞Hello＜/b＞"};}
};
</script＞

---

v-html：原始 HTML 渲染

解析数据中的 HTML 标签并渲染为真实 DOM。适合需要动态生成 HTML 的场景，但必须谨慎使用。

<template＞＜div＞<!-- 渲染粗体文字 --><p v-html="rawHtml"＞＜/p＞  <!-- 显示 Hello（加粗） --><!-- 动态生成内容 --><div v-html="dynamicContent"＞＜/div＞＜/div＞
</template＞<script＞
export default {data() {return {rawHtml: "<b＞Hello＜/b＞",dynamicContent: "＜span style='color: red;'＞警告＜/span＞"};}
};
</script＞

---

安全风险示例

当使用 v-html 渲染不可信内容时，会导致 XSS 攻击：

<template＞＜div＞<!-- 假设用户输入恶意内容 --><div v-html="userInput"＞＜/div＞＜/div＞
</template＞<script＞
export default {data() {return {// 模拟用户输入的恶意脚本userInput: "＜script＞alert('你的信息被盗了！')＜/script＞"};}
};
</script＞

此时页面会执行脚本弹窗。实际开发中，必须对 v-html 的内容进行过滤或消毒。

---

两者对比

特性	v-text / {{ }}	v-html
输出类型	纯文本	原始 HTML
安全性	自动转义 HTML 标签	直接执行 HTML/JS
性能	更高	较低（需解析 DOM）
适用场景	普通文本、数值	富文本、可信 HTML 片段