当前位置：首页 > news >正文

如何在 Vue 3 中实现一个自定义的 `v-html` 组件

news 来源：原创 2025/6/29 9:11:50

引言

在 Vue.js 中，v-html 是一个非常有用的指令，用于将 HTML 字符串渲染到元素中。然而，由于它直接插入 HTML 内容，存在潜在的安全风险（如 XSS 攻击）。因此，了解其工作原理并实现一个安全的替代方案是非常重要的。

`v-html` 原理

v-html 的主要功能包括：

将字符串内容作为 HTML 插入到指定的 DOM 元素中。
不会进行任何的 HTML 转义，因此可以插入完整的 HTML 结构。
由于其直接插入 HTML 的特性，使用时需要非常小心，以防止 XSS 攻击。

实现一个自定义的 `v-html` 组件

为了实现一个安全的 HTML 渲染组件，我们可以使用 DOMParser 来解析和处理 HTML 内容。以下是一个详细的实现步骤。

步骤

定义一个 prop 来接收 HTML 字符串。
使用 DOMParser 解析 HTML 字符串。
将解析后的 DOM 内容插入到组件的模板中。
监听 prop 的变化，以便在内容变化时重新渲染。

实现代码

假设我们有一个 YHtml.vue 组件，我们将在这个组件中实现自定义的 v-html 功能。

<template><div ref="htmlContainer"></div>
</template><script setup lang="ts">
import { onMounted, ref, watch } from 'vue'// 定义一个 prop 来接收 HTML 字符串
const props = defineProps<{htmlContent: string
}>()// 获取对 DOM 元素的引用
const htmlContainer = ref<HTMLElement | null>(null)// 使用 DOMParser 解析 HTML 字符串并插入到容器中
const renderHtml = () => {if (htmlContainer.value) {const parser = new DOMParser()const doc = parser.parseFromString(props.htmlContent, 'text/html')const body = doc.body// 清空容器htmlContainer.value.innerHTML = ''// 将解析后的 HTML 内容插入到容器中Array.from(body.childNodes).forEach(node => {htmlContainer.value?.appendChild(node)})}
}// 在组件挂载时渲染 HTML
onMounted(() => {renderHtml()
})// 监听 htmlContent 的变化，重新渲染 HTML
watch(() => props.htmlContent, renderHtml)
</script><style scoped>
/* 添加样式 */
</style>

使用示例

假设你在父组件中使用 YHtml 组件，可以这样写：

<template><div><YHtml :htmlContent="htmlString" /></div>
</template><script setup lang="ts">
import YHtml from './components/YHtml.vue'
import { ref } from 'vue'const htmlString = ref('<p>这是一个 <strong>安全</strong> 的 HTML 内容。</p>')
</script>

注意事项

安全性：虽然我们使用了 DOMParser 来解析 HTML，但在实际应用中，还需要对输入的 HTML 进行严格的过滤和验证，以防止 XSS 攻击。
性能：频繁地操作 DOM 可能会影响性能，特别是在处理大量或复杂的 HTML 内容时。

总结

通过以上步骤，你可以在 Vue 3 中实现一个自定义的 v-html 组件。这个组件不仅能够安全地渲染 HTML 内容，还能有效地监听内容的变化并重新渲染。希望这篇帖子对你有所帮助！

如何在 Vue 3 中实现一个自定义的 `v-html` 组件

引言在 Vue.js 中，v-html 是一个非常有用的指令，用于将 HTML 字符串渲染到元素中。然而，由于它直接插入 HTML 内容，存在潜在的安全风险（如 XSS 攻击）。因此，了解其工作原理并实现一个安全的替…...

编程日记 2025/6/29 9:11:50

差分对的返回电流-信号完整性分析

差分对的返回电流: 单端线的返回电流集中在参考平面，差分对的返回电流是怎样分布的?有一种观点认为，对于差分对这种耦合传输结构，其中一条走线是另一条走线的返回路径。甚至更进一步得出差分对不需要参考平面的结论。是否真的如此?要想了解…...

编程日记 2025/6/29 12:23:38

html单页业务介绍源码

源码介绍 html单页业务介绍源码，源码由HTMLCSSJS组成，记事本打开源码文件可以进行内容文字之类的修改，双击html文件可以本地运行效果预览源码免费获取 html单页业务介绍源码...

编程日记 2025/6/29 12:20:39

IDEA导入并启动若依项目步骤（SpringBoot+Vue3）

1.下载后端项目项目地址：https://gitee.com/y_project/RuoYi-Vue 复制命令，将项目克隆到本地 git clone gitgitee.com:y_project/RuoYi-Vue.git使用IDEA打开（会有点慢，耐心等待），打开后如下 2.Mysql导…...

编程日记 2025/6/29 12:17:18

零基础上手Python数据分析 (22)案例实战]之利用 Matplotlib Seaborn 进行电商销售数据可视化分析

写在前面 —— 图表为刃，洞察先行！综合运用 Pandas、Matplotlib 与 Seaborn，点亮数据价值本篇通过一个完整的案例实战，体验如何将数据分析与数据可视化紧密结合，让冰冷的数据转化为生动、直观、富有洞察力的视觉故事！案例目标：本篇博客将延续我们在第 17 篇案例中…...

编程日记 2025/6/29 9:11:48

图像预处理-霍夫变换

一.概念霍夫变换是图像处理的一种技术，主要用于检测图像中的直线、圆等几何形状。基本思想就是将图像空间（直角坐标系或极坐标系）中的点映射到(霍夫空间)参数空间中，通过在参数空间中寻找累计最大值实现对特定形状的检测。接下…...

编程日记 2025/6/29 9:15:17

逐步了解蓝牙 LE 配对(物联网网络安全)

配对是蓝牙 LE 中的一个重要概念。让我们来了解一下蓝牙 LE 配对的基础知识，概述 LE 设备如何在可信设备之间安全地共享密钥。在之前的一篇文章]中，我们讨论了蓝牙 LE 的安全密钥。我们了解到，蓝牙 LE 设备可以创建并共享三个不同的安全密钥：一个用于数据加密，一个用于创…...

编程日记 2025/6/29 9:11:49

嵌入模型（Embedding Models）原理详解：从Word2Vec到BERT的技术演进

一、什么是嵌入模型？ 嵌入模型（Embedding Models） 是一种将高维离散数据（如文本、图像）转换为低维连续向量表示的技术。这些向量能够反映数据的语义关系，使得“语义相近的实体在向量空间中距离更近”。例如…...

编程日记 2025/6/29 9:11:52

解析塔能科技：绿色低碳智慧节能一站式破局之匙

在能源问题日益凸显的当下，绿色低碳、高效节能成为全球发展的重要课题。对各类节能方案进行深入剖析后，可以发现塔能科技的绿色低碳智慧节能一站式解决方案极具创新性与实用性，切实为众多行业面临的能源困境提供了有效解决路径。直面行业痛点…...

编程日记 2025/6/29 9:11:53

问： el-menu箭头改为右下回答： :deep(.el-menu){.el-sub-menu .el-sub-menu__icon-arrow{transition: transform 0.3stransform: rotateZ(-90deg) !important;}/* 展开状态：箭头向下 */.el-sub-menu.is-opened .el-sub-menu__icon-arrow,…...

编程日记 2025/6/29 11:07:18

[特殊字符][特殊字符] HarmonyOS相关实现原理聊聊！[特殊字符][特殊字符]

Hey小伙伴们~ 今天咱们来聊聊HarmonyOS的实现原理吧！🤔💡 虽然直接看源代码是最直接的方式，但是OpenHarmony项目的开源进度有点让人捉急呢… 不过没关系，我们可以通过已经开放的SDK、IDE、开发示例和编译产物来一探究竟…...

编程日记 2025/6/29 9:12:08

RTSP播放器实现回调RGB|YUV给视觉算法，然后二次编码推送到RTMP服务

引言在本文中，我们将介绍如何基于大牛直播SDK构建一个功能强大的RTSP|RTMP播放器，该播放器利用自定义SDK解码视频、处理RGB帧，并将其推送到RTMP流中进行直播。这个解决方案非常适合需要在实时视频流中集成视觉算法的场景，在处理…...

编程日记 2025/6/29 12:20:01

补题【Darkness+Different Billing+Dice Game】

文章目录 1.Darkness2.Different Billing3.Dice Game 1.Darkness 题目来源：Darkness I 这题不难想，通过作图我们发现当nm时直接取对角线就好当n!m时，取m,n的最小值，那么最小值的这个正方形都可以被填为黑色，剩下的…...

编程日记 2025/6/29 11:11:13

卷积神经网络：视觉炼金术士的数学魔法

🎮 “你以为《赛博朋克2077》的夜之城是画出来的？不，是卷积神经网络’卷’出来的！” 🎮 一、卷积：像素世界的连连看大师想象你拿着一张《蒙娜丽莎》的拼图——卷积核就像你手中的拼图碎片，在画…...

编程日记 2025/6/29 11:20:18

Python：简介，Python解释器安装，第一个Python程序，开发环境（PyCharm安装和配置、Sublime安装和配置）

目录 Python简介 Python解释器的安装（Windows） 下载和安装Python安装包（解释器） 验证Python安装情况第一个Python程序单行运行多行运行 Python开发环境（安装和配置PyCharm工具） 安装PyCharm Py…...

编程日记 2025/6/29 9:11:56

CE第二次作业

实验要求： 1.配置ssh实现A，B主机互相免密登录 2.配置nginx服务，通过多ip区分多网站一，配置ssh实现A，B主机互相免密登录步骤在主机 A 上生成 SSH 密钥对。把主机 A 的公钥复制到主机 B。在主机 B 上重复上述步骤…...

编程日记 2025/6/29 9:11:55

【阿里云大模型高级工程师ACP习题集】2.4 自动化评测答疑机器人的表现（⭐️⭐️⭐️ 重点章节！！！）

习题集：【单选题】在使用Ragas评估RAG应用时，Answer Correctness指标计算中，语义相似度是通过以下哪种方式得到的？（） A. 大模型直接判断 B. 计算文本向量的余弦相似度 C. 对比文本词汇重合度 D. 统计文本字数差异【多选题】当Context recall指标得分较低时，可采取的优…...

编程日记 2025/6/29 9:56:21

多头注意力

Multi-Head Attention 论文地址 https://arxiv.org/pdf/1706.03762 多头注意力介绍多头注意力是Transformer模型的关键创新，通过并行执行多个独立的注意力计算单元，使模型能够同时关注来自不同表示子空间的信息。每个注意力头学习不同的语义特征&#x…...

编程日记 2025/6/29 9:12:10

【leetcode100】目标和

1、题目描述给你一个非负整数数组 nums 和一个整数 target 。向数组中的每个整数前添加或 - ，然后串联起所有整数，可以构造一个表达式 ： 例如，nums [2, 1] ，可以在 2 之前添加 ，在 1 之前添加 - …...

编程日记 2025/6/29 9:12:58

动态哈希映射深度指南：从基础到高阶实现与优化

哈希表是计算机科学中最高效的数据结构之一，而动态哈希映射通过智能扩容机制，在实时系统中展现出极强的适应性。本文将深入探讨其实现细节，结合主流框架源码解析，并给出可落地的性能优化方案。一、动态哈希的数学本质 1. 哈希函…...

编程日记 2025/6/29 11:32:56

leetcode 2799. 统计完全子数组的数目中等

给你一个由正整数组成的数组 nums 。如果数组中的某个子数组满足下述条件，则称之为完全子数组 ： 子数组中不同元素的数目等于整个数组不同元素的数目。返回数组中完全子数组的数目。子数组是数组中的一个连续非空序列。示例 1&#xff…...

编程日记 2025/6/29 9:12:20

使用RabbitMQ实现判题功能

这次主要选用RabbitMQ消息队列来对判题服务和题目服务解耦，题目服务只需要向消息队列发送消息，判题服务从消息队列中取信息去执行判题，然后异步更新数据库即可。五一宝宝请快点跑~~~~~ 先回顾一下RabbitMQ （1）引入依…...

编程日记 2025/6/29 12:06:42

无过拟合的记忆：分析大语言模型的训练动态

Kushal Tirumala⇤ Aram H. Markosyan⇤ Luke Zettlemoyer Armen Aghajanyan Meta AI 研究 {ktirumala,amarkos,lsz,armenag}fb.com 原文链接：[2210.09262] Physics-Driven Convolutional Autoencoder Approach for CFD Data Compressions 摘要尽管超大语言模型…...

编程日记 2025/6/29 10:43:37

【Java面试笔记：进阶】16.synchronized底层如何实现？什么是锁的升级、降级？

在 Java 中，synchronized 关键字的底层实现依赖于对象头（Object Header）和监视器锁（Monitor）机制，并通过锁的状态升级（Lock Escalation）来优化同步性能。 1. synchronized 的底层实现 synchronized 的同步机制基于 Monitor 对象，它是同步的基本实现单元。通过…...

编程日记 2025/6/29 9:14:07

python可视化：北方城市人口流动趋势分析1

python可视化：北方城市人口流动趋势分析1 斑点鱼在做销售数据分析时发现北京天津的同比下滑明显，客流下滑明显。而山东保定的客流同比上升。引起了斑点鱼对于北方人口流动的好奇。所以本文将分析2025年北方地区(北京、天津、河北、山东、山西、辽宁等)…...

编程日记 2025/6/29 9:12:06

wps excel 常用操作

数据分列对于有分隔规律的内容，可以通过分隔符将该内容进行分列例如，以下字符串，可使用Excel对包含IP地址、数据库类型、环境、负责人和日期的字符串进行分列： 192.168.175.211-MySQL 数据库-DEV-李华-2025.06.30 将以上字符串…...

编程日记 2025/6/29 9:11:57

云智融合普惠大模型AI，政务服务重构数智化路径

2025年是“十四五”收官之年，数字政府和政务数智化作为“数字中国”建设的重点，已经取得了显著成效。根据《联合国电子政务调查报告2024》，我国电子政务发展指数全球排名第35位，与2022年相比提升8个名次；其中&#xff…...

编程日记 2025/6/29 9:12:12

全行业软件定制：APP/小程序/系统开发与物联网解决方案

在数字化浪潮席卷全球的今天，软件已经渗透到我们生活的方方面面，成为推动社会进步的重要力量。作为一家专注于专业软件定制开发的公司，哲科软件深知每一个行业、每一个企业都有其独特的需求和痛点。因此，我们致力于提供个性化软件…...

编程日记 2025/6/29 11:31:55

Java虚拟机（JVM）家族发展史及版本对比

Java虚拟机（JVM）家族发展史及版本对比一、JVM家族发展史 1. 早期阶段（1996-2000） Classic VM（Java 1.0-1.1）： 厂商：Sun Microsystems（Oracle前身）。特点&…...

编程日记 2025/6/29 9:12:03

电脑怎么强制退出程序回到桌面详细操作步骤

电脑日常使用过程中，我们有时会遇到程序无响应或卡死的情况，这时需要采取措施强制关闭这些程序才能保持电脑的正常工作和运行。那么，电脑如何强制退出程序呢？其实方法有很多种，下面便为大家介绍几种电脑强制关闭程序的…...

编程日记 2025/6/29 10:16:54

蓝牙 LE：安全模式和程序说明（蓝牙中的网络安全）

在蓝牙低功耗 (BLE) 中，安全性是一个多方面的难题。了解 BLE 的三种主要安全模式以及五个关键的 BLE 安全程序。毫无疑问，低功耗蓝牙 (BLE) 技术的迅猛发展为我们的生活带来了更多便利。然而，随着低功耗蓝牙设备的普及，人们对其安全性的担忧也日益加剧。与普遍看法相反…...

编程日记 2025/6/29 9:12:07

低代码平台开发胎压监测APP

项目介绍该项目是一个利用Flutter框架和蓝牙技术实现轮胎压力实时监测的应用。主要功能如下： 用于接收蓝牙模块传输的胎压数据，并实时显示胎压值。APP对接收到的胎压数据进行处理，如单位转换、数据滤波等，然后将处理后的胎压值…...

编程日记 2025/6/29 11:30:42

GNOME扩展入门：日期时间

Getting Started | GNOME JavaScript 1.扩展路径 ~/.local/share/gnome-shell/extensions/ 2.新建文件夹 datetimesonichy 3.metadata.json {"uuid": "datetimesonichy","name": "datetime","description": "Dis…...

编程日记 2025/6/29 9:15:25

NLP高频面试题（五十二）——深度学习优化器详解

在深度学习的训练过程中，各种基于梯度的优化器肩负着寻找损失函数最优解的重任。最基础的梯度下降法通过沿着损失函数负梯度方向迭代更新参数，实现对模型参数的优化；而随机梯度下降（SGD）则以更高的计算效率和内存利用率在大规模数据集上大放异彩，但也因更新噪声大、易陷入…...

编程日记 2025/6/29 10:40:41

SLAM常用地图对比示例

序号地图类型概述1格栅地图将现实环境栅格化，每一个栅格用 0 和 1 分别表示空闲和占据状态，初始化为未知状态 0.52特征地图以点、线、面等几何特征来描绘周围环境，将采集的信息进行筛选和提取得到关键几何特征3拓扑地图将重要部分抽象为地图&…...

编程日记 2025/6/29 9:12:13

Web常见攻击方式及防御措施

一、常见Web攻击方式 1. 跨站脚本攻击(XSS) 攻击原理：攻击者向网页注入恶意脚本，在用户浏览器执行存储型XSS：恶意脚本存储在服务器（如评论区） 反射型XSS：恶意脚本通过URL参数反射给用户 DOM型XSS&…...

编程日记 2025/6/29 9:12:05

java.lang.IllegalArgumentException: URI is not hierarchical报错

java.lang.IllegalArgumentException: URI is not hierarchical Thread.currentThread().getContextClassLoader("类的全路径").getClass().newInstance()一个类的静态块初始化异常了，后面调用这个类创建对象会报错吗？ 是的，如果一…...

编程日记 2025/6/29 9:13:02

118. 杨辉三角

目录一、问题描述二、解题思路三、代码四、复杂度分析一、问题描述给定一个非负整数 numRows，生成「杨辉三角」的前 numRows 行。在「杨辉三角」中，每个数是它左上方和右上方的数的和。二、解题思路每一行的第一个和最后一个元素是 1&…...

编程日记 2025/6/29 9:12:15

Anything V4/V5 模型汇总

二次元风格生成扩散模型-anything-v4.0Stable Diffusion anything-v5-PrtRE模型介绍及使用深度探索 Anything V5：安装与使用全攻略anything-v5x0.25少儿插画_v1xyn-ai/anything-v4.0...

编程日记 2025/6/29 12:23:34

网络原理 - 7（TCP - 4）

目录 6. 拥塞控制 7. 延时应答 8. 捎带应答 9. 面向字节流 10. 异常情况总结： 6. 拥塞控制虽然 TCP 有了滑动窗口这个大杀器，就能够高效可靠的发送大量的数据，但是如果在刚开始阶段就发送大量的数据，仍然可能引起大量的…...

编程日记 2025/6/29 11:01:09

探秘 FFmpeg 版本发展时间简史

前言 FFmpeg 是一套开源的计算机程序，主要用于记录、转换数字音频、视频，并能将其转化为流。它提供了录制、转换以及流化音视频的完整解决方案，在多媒体处理领域应用广泛。很多小伙伴们想系统的学习FFmpeg，还是有必要了解下FFmpeg的版本发展历史，感受它每次的版本迭代是如…...

编程日记 2025/6/29 9:11:58

5.3.1 MvvmLight以及CommunityToolkit.Mvvm介绍

MvvmLight、CommunityToolkit.Mvvm是开源包，他们为实现 MVVM（Model-View-ViewModel）模式提供了一系列实用的特性和工具，能帮助开发者更高效地构建 WPF、UWP、MAUI 等应用程序。本文介绍如下：一、使用(旧)的MvvmLight库其特点如下，要继承的基类是ViewModelBase；且使用…...

编程日记 2025/6/29 11:01:46

PCB常见封装类型

1. 电阻、电容、电感封装 2. 二极管、三极管封 3. 排阻类器件（8脚、16脚）封装 4. SO类器件（间距有1.27、2.54mm等）封装 5. QFP类器件封装（四方扁平封装） 结构：引脚分布在封装的四个侧面&#…...

编程日记 2025/6/29 10:15:02

一键多环境构建——用 Hvigor 玩转 HarmonyOS Next

引言在 HarmonyOS Next 的应用开发中，常常需要针对不同环境（测试、预发、线上）或不同签名（调试、正式）输出多个 APP/HAP 包。虽然 HarmonyOS 提供了多目标构建（Multi-Target Build）能力&#…...

编程日记 2025/6/29 9:52:11

SQLPandas刷题(LeetCode3451.查找无效的IP地址)

描述：LeetCode3451.查找无效的IP地址表：logs ---------------------- | Column Name | Type | ---------------------- | log_id | int | | ip | varchar | | status_code | int | ---------------------- log_id 是这张表的唯…...

编程日记 2025/6/29 10:14:17

【leetcode100】组合总和Ⅳ

1、题目描述给你一个由不同整数组成的数组 nums ，和一个目标整数 target 。请你从 nums 中找出并返回总和为 target 的元素组合的个数。题目数据保证答案符合 32 位整数范围。示例 1： 输入：nums [1,2,3], target 4 输出&#xff1…...

编程日记 2025/6/29 12:23:29

2020-06-23 暑期学习日更计划（机器学习入门之路（资源汇总）+概率论）

机器学习入门前言说实话，机器学习想学好真心不易，很多时候都感觉自己学得云里雾里。以前一段时间自己为了完成毕业设计，在机器学习的理论部分并没有深究，仅仅通过TensorFlow框架力求快速实现模型。现在来看，很多时候…...

编程日记 2025/6/29 11:03:29

Linux操作系统--基础I/O(上)

目录 1.回顾C文件接口 stdin、stdout、stderr 2.系统文件I/O 3.接口介绍 4.open函数返回值 5.文件描述符fd 5.1 0&1&2 1.回顾C文件接口 hello.c写文件 #include<stdio.h> #include<string.h>int main() {FILE *fp fopen("myfile","…...

编程日记 2025/6/29 11:40:50

Spring boot 中的IOC容器对Bean的管理

Spring Boot 中 IOC 容器对 Bean 的管理，涵盖从容器启动到 Bean 的生命周期管理的全流程。步骤 1：理解 Spring Boot 的容器启动 Spring Boot 的 IOC 容器基于 ApplicationContext，在应用启动时自动初始化。入口类：通过 SpringB…...

编程日记 2025/6/29 11:42:28

ARINC818协议一些说明综述

关键术语航空总线技术光纤通道层次架构光纤通道拓扑结构 FC-AV协议，架构，容器系统 ARINC818协议，容器 ADVB帧映射，帧格式机载视频处理系统对视频数据进行实时处理和记录。分辨率：1080p,4k,8k视频技术 FC-AV技术是…...

编程日记 2025/6/29 19:36:37

引言

v-html 原理

实现一个自定义的 v-html 组件

步骤

实现代码

使用示例

注意事项

总结

相关文章：

`v-html` 原理

实现一个自定义的 `v-html` 组件