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>

注意事项

  1. XSS 安全风险

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

    • 当使用 <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>
  3. 与文本插值的区别

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

    vue

    xml 复制代码
    <template>
      <!-- 显示为纯文本:<strong>加粗文本</strong> -->
      <div>{{ '<strong>加粗文本</strong>' }}</div>
      
      <!-- 显示为加粗文本 -->
      <div v-html="'<strong>加粗文本</strong>'"></div>
    </template>
  4. 不能用于 SVG

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

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

相关推荐
HashTang11 分钟前
不用再配服务器了!这套 Next.js + Cloudflare 模板,一个人搞定全栈出海
前端·后端·边缘计算
前端架构师-老李1 小时前
16 Electron 应用自动更新方案:electron-updater 完整指南
前端·javascript·electron
一只学java的小汉堡1 小时前
HTML 01入门:从概念到开发环境搭建与页面头部配置
前端·css·html
用户21496515898751 小时前
从零搭建uniapp环境-记录
前端
努力写代码的熊大3 小时前
stack、queue与priority_queue的用法解析与模拟实现
java·前端·javascript
im_AMBER3 小时前
React 06
前端·javascript·笔记·学习·react.js·前端框架
wyzqhhhh4 小时前
前端常见的设计模式
前端·设计模式
IT_陈寒4 小时前
React 19重磅前瞻:10个性能优化技巧让你少写30%的useEffect代码
前端·人工智能·后端
今天没有盐5 小时前
💕CSS 基础入门指南💕:选择器与文本样式
前端·html·响应式设计
云枫晖5 小时前
Webpack系列-Entry入口
前端·webpack