Vue3 v-html的用法

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

基本用法

vue

xml 复制代码

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

注意事项

XSS 安全风险
- v-html 会直接解析并执行 HTML 内容，若内容来自用户输入或不可信源，可能导致 XSS 攻击
- 避免在用户可控的内容上使用 v-html
样式作用域问题
- 当使用 <style scoped> 时，样式不会作用到 v-html 渲染的内容
- 解决方案：使用深度选择器（::v-deep）或非 scoped 样式
vue
xml 复制代码
```
<style scoped>
/* 不会作用到 v-html 内容 */
.v-html-content p {
  color: red;
}

/* 使用深度选择器 */
::v-deep .v-html-content p {
  color: green;
}
</style>
```

与文本插值的区别

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

vue

xml 复制代码

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

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

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