Vue.js 中动态渲染 HTML 字符串：掌握 v-html 指令

动态内容渲染的挑战

在构建现代 web 应用时，我们经常需要处理包含不同类型内容的字符串数组，其中一些可能是纯文本，另一些则可能包含 html 标记，需要以富文本形式渲染。例如，一个消息列表可能同时包含用户输入的普通文本和系统生成的带有粗体、换行等格式的 html 片段。

直接使用 Vue 的双大括号 {{ }} 进行数据绑定时，Vue 会将内容作为纯文本处理，对其中的 HTML 标记进行转义，从而避免潜在的跨站脚本攻击 (XSS) 风险。这意味着 <b>print this in bold</b> 会被原样显示，而不是渲染为加粗的文本。

开发者有时会尝试通过 JavaScript 的 DOMParser 等 API 来解析 HTML 字符串，期望获得可渲染的 DOM 结构。然而，如原问题所示，直接返回 DOMParser 的结果（例如 parser.parseFromString(htmlString, 'text/html')）并将其绑定到模板中，通常会得到 [object HTMLDocument] 这样的字符串表示，而不是实际渲染的 HTML 元素，这并不是我们期望的结果。

Vue.js 的解决方案：v-html 指令

为了解决在 Vue.js 中动态渲染 HTML 字符串的需求，Vue 提供了一个内置指令：v-html。该指令允许你将一个字符串作为原始 HTML 插入到元素的 innerHTML 中。

v-html 的基本用法

v-html 指令非常直观。你只需将需要渲染为 HTML 的字符串绑定到该指令即可。

立即学习“前端免费学习笔记（深入）”；

示例代码：

假设我们有一个包含混合内容的字符串数组：

// data.js
const msgs = [
  'hello there',
  '<b>print this in bold</b>',
  '<br/>',
  'and this is in another line'
];

export default {
  data() {
    return {
      msgs: msgs
    };
  }
};

在 Vue 模板中，我们可以这样使用 v-html：

<!-- MyComponent.vue -->
<template>
  <div>
    <div v-for="(msg, index) in msgs" :key="index">
      <div v-html="msg"></div>
    </div>
  </div>
</template>

在这个例子中：

• 'hello there' 会被作为普通文本显示。
• '<b>print this in bold</b>' 会被渲染为加粗的文本。
• '<br/>' 会被渲染为换行符。
• 'and this is in another line' 会被作为普通文本显示。

通过 v-html，Vue 会直接将 msg 变量的值解析为 HTML，并将其插入到 <div> 元素的 innerHTML 中。

实现智能条件渲染

在某些场景下，我们可能希望更精细地控制何时使用 v-html。例如，我们可能只想对那些确实包含 HTML 标记的字符串应用 v-html，而对纯文本字符串则使用普通的数据绑定。这可以通过一个辅助函数和条件渲染来实现。

怪兽AI数字人

数字人短视频创作，数字人直播，实时驱动数字人

44

查看详情

我们可以创建一个简单的函数来判断一个字符串是否可能包含 HTML 标记。请注意，这是一个简化的判断，更严谨的判断可能需要正则表达式或更复杂的解析逻辑。

// utils.js 或组件 methods
function isHtml(str) {
  // 检查字符串是否包含常见的HTML标签起始符
  // 这是一个简单判断，可能不完全准确，但对常见场景有效
  return /<[a-z][\s\S]*>/i.test(str);
}

然后，在模板中结合 v-if 或三元表达式来条件性地应用 v-html：

<!-- MyComponent.vue -->
<template>
  <div>
    <div v-for="(msg, index) in msgs" :key="index">
      <div v-if="isHtml(msg)" v-html="msg"></div>
      <div v-else>{{ msg }}</div>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      msgs: [
        'hello there',
        '<b>print this in bold</b>',
        '<br/>',
        'and this is in another line'
      ]
    };
  },
  methods: {
    isHtml(str) {
      // 简单判断字符串是否包含HTML标签
      // 更严谨的判断可能需要考虑完整的HTML结构或使用DOMParser进行验证
      return /<[a-z][\s\S]*>/i.test(str);
    }
  }
};
</script>

这种方法提供了更高的灵活性，确保只有在必要时才使用 v-html。

安全注意事项：XSS 风险与防范

使用 v-html 指令时，安全性是首要考虑的问题。由于 v-html 直接将字符串作为原始 HTML 插入到 DOM 中，它可能导致跨站脚本攻击 (XSS)。如果 v-html 的内容来自用户输入或不可信的第三方来源，恶意用户可能会注入脚本，从而窃取用户数据、篡改页面内容甚至进行更严重的攻击。

重要原则：

• 永远不要将不可信的内容直接绑定到 v-html。 除非你百分之百确定内容是安全的，否则应避免使用。
• 内容净化 (Sanitization)： 如果必须渲染来自不可信来源的 HTML，请务必在将其绑定到 v-html 之前，使用可靠的 HTML 净化库（如 DOMPurify、js-xss 等）对内容进行严格的净化处理。这些库可以移除潜在的恶意标签、属性和脚本。

示例（使用 DOMPurify 净化）：

首先安装 dompurify：

npm install dompurify
# 或者 yarn add dompurify

然后在组件中使用：

<!-- MyComponent.vue -->
<template>
  <div>
    <div v-for="(msg, index) in msgs" :key="index">
      <div v-html="sanitizedHtml(msg)"></div>
    </div>
  </div>
</template>

<script>
import DOMPurify from 'dompurify';

export default {
  data() {
    return {
      msgs: [
        'hello there',
        '<b>print this in bold</b>',
        '<br/>',
        'and this is in another line',
        '<img src="x" onerror="alert(\'XSS Attack!\')">' // 恶意内容示例
      ]
    };
  },
  methods: {
    sanitizedHtml(htmlString) {
      // 在渲染前对HTML字符串进行净化
      return DOMPurify.sanitize(htmlString);
    }
  }
};
</script>

通过 DOMPurify.sanitize() 处理后，恶意脚本会被移除，从而大大降低 XSS 风险。

总结

v-html 是 Vue.js 提供的一个强大且必要的指令，用于在应用中动态渲染包含 HTML 标记的字符串。它解决了直接数据绑定无法渲染富文本的问题，并提供了一种简单直接的方式来显示预格式化的内容。然而，其便利性也伴随着潜在的安全风险。开发者在使用 v-html 时必须时刻警惕 XSS 攻击，并采取适当的内容净化措施，尤其是在处理用户生成或外部数据时。通过结合 v-html、条件渲染和严格的安全实践，我们可以确保 Vue.js 应用既能灵活地展示丰富内容，又能维护其安全性。

以上就是Vue.js 中动态渲染 HTML 字符串：掌握 v-html 指令的详细内容，更多请关注php中文网其它相关文章！