Vue3 v-html的用法

在 Vue3 中，v-html 指令用于将数据以 HTML 格式插入到元素中，它会解析并渲染包含的 HTML 标签，而不是将其作为纯文本显示。

基本用法

vue

<template>
  <!-- 使用 v-html 渲染 HTML 内容 -->
  <div v-html="htmlContent"></div>
</template>

<script setup>
const htmlContent = `
  <h3>这是通过 v-html 渲染的内容</h3>
  <p style="color: blue;">包含 HTML 标签和样式</p>
  <ul>
    <li>列表项 1</li>
    <li>列表项 2</li>
  </ul>
`;
</script>

注意事项

1. XSS 安全风险

   • v-html 会直接解析并执行 HTML 内容，若内容来自用户输入或不可信源，可能导致 XSS 攻击
   • 避免在用户可控的内容上使用 v-html

2. 样式作用域问题

   • 当使用 <style scoped> 时，样式不会作用到 v-html 渲染的内容
   • 解决方案：使用深度选择器（::v-deep）或非 scoped 样式

   vue

   <style scoped>
   /* 不会作用到 v-html 内容 */
   .v-html-content p {
     color: red;
   }
   
   /* 使用深度选择器 */
   ::v-deep .v-html-content p {
     color: green;
   }
   </style>

3. 与文本插值的区别

   • 文本插值（{{ }}）会将内容作为纯文本处理
   • v-html 会将内容作为 HTML 解析

   vue

   <template>
     <!-- 显示为纯文本：<strong>加粗文本</strong> -->
     <div>{{ '<strong>加粗文本</strong>' }}</div>
     
     <!-- 显示为加粗文本 -->
     <div v-html="'<strong>加粗文本</strong>'"></div>
   </template>

4. 不能用于 SVG

   • v-html 不能在 SVG 元素中使用，会被忽略

使用 v-html 时应谨慎评估安全风险，优先考虑使用 Vue 的组件系统和内置指令来构建界面，只有在确实需要直接插入 HTML 内容时才使用。