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 片段