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

10 Vue3中v-html指令的用法

news 2025/10/29 2:14:11

概述

v-html主要是用来渲染富文本内容，比如评论信息，新闻信息，文章信息等。

v-html是一个特别不安全的指令，因为它会将文本以HTML的显示进行渲染，一旦文本里面包含一些恶意的js代码，可能会导致整个网页发生崩溃。

不过，v-html在渲染富文本的场景中，有着非常大的优势，所以在一些博客网站项目中，经常能够看到这个指令的出现。

基本用法

我们创建src/components/Demo10.vue，在这个组件中，我们要分别渲染以下情形的HTML内容：

场景1：纯文本内容
场景2：比较简单的HTML内容
场景3：包含CSS样式的HTML内容
场景4：包含JS脚本的HTML内容
场景5：包含CSS+JS的HTML内容

代码如下：

<script setup>
const s1="你好，张大鹏"
const s2="<h1>你好，张大鹏</h1>"
const s3="<h1 style='color: red'>你好，张大鹏</h1>"
</script>
<template><div>纯文本：<span v-html="s1"></span></div><div>比较简单的HTML内容：<div v-html="s2"></div></div><div>包含CSS样式的HTML内容：<div v-html="s3"></div></div><div>包含JS脚本的HTML内容：<div v-html="`<script>console.log('你好，张大鹏')</script>`"></div></div><div>包含CSS样式+JS脚本的HTML内容：<div v-html="`${s3}<script>console.log('你好，张大鹏')</script>`"></div></div>
</template>

接着，我们修改src/App.vue，引入Demo10.vue并进行渲染：

<script setup>
import Demo from "./components/Demo10.vue"
</script>
<template><h1>欢迎跟着Python私教一起学习Vue3入门课程</h1><hr><Demo/>
</template>

然后，我们浏览器访问：http://localhost:5173/

外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传

完整代码

package.json

{"name": "hello","private": true,"version": "0.1.0","type": "module","scripts": {"dev": "vite","build": "vite build"},"dependencies": {"vue": "^3.3.8"},"devDependencies": {"@vitejs/plugin-vue": "^4.5.0","vite": "^5.0.0"}
}

vite.config.js

import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'export default defineConfig({plugins: [vue()],
})

index.html

<!doctype html>
<html lang="en"><head><meta charset="UTF-8" /><link rel="icon" type="image/svg+xml" href="/vite.svg" /><meta name="viewport" content="width=device-width, initial-scale=1.0" /><title>Vite + Vue</title></head><body><div id="app"></div><script type="module" src="/src/main.js"></script></body>
</html>

src/main.js

import { createApp } from 'vue'
import App from './App.vue'createApp(App).mount('#app')

src/App.vue

<script setup>
import Demo from "./components/Demo10.vue"
</script>
<template><h1>欢迎跟着Python私教一起学习Vue3入门课程</h1><hr><Demo/>
</template>

src/components/Demo10.vue

<script setup>
const s1="你好，张大鹏"
const s2="<h1>你好，张大鹏</h1>"
const s3="<h1 style='color: red'>你好，张大鹏</h1>"
</script>
<template><div>纯文本：<span v-html="s1"></span></div><div>比较简单的HTML内容：<div v-html="s2"></div></div><div>包含CSS样式的HTML内容：<div v-html="s3"></div></div><div>包含JS脚本的HTML内容：<div v-html="`<script>console.log('你好，张大鹏')</script>`"></div></div><div>包含CSS样式+JS脚本的HTML内容：<div v-html="`${s3}<script>console.log('你好，张大鹏')</script>`"></div></div>
</template>

启动方式

yarn
yarn dev

浏览器访问：http://localhost:5173/

10 Vue3中v-html指令的用法

概述 v-html主要是用来渲染富文本内容，比如评论信息，新闻信息，文章信息等。 v-html是一个特别不安全的指令，因为它会将文本以HTML的显示进行渲染，一旦文本里面包含一些恶意的js代码，可能会导致整个网页发…...

编程日记 2023/12/22 5:38:57

华为数通方向HCIP-DataCom H12-831题库(多选题：181-200）

第181题如图所示，R1、R2、R3、R4都部署为SPF区域0，链路的cost值如图中标识。R1、R2R3、R4的Loopback0通告入OSPF。R1、R2、R3与R4使用Loopback0作为连接接口,建立BGP对等体关系，其中R4为RR设备，R1、R2、R3是R4的客户端。当R4的直连地址172.20,1,4/32通告入BGP后，以下关R…...

编程日记 2023/12/22 5:37:56

DC-磁盘管理

2023年全国网络系统管理赛项真题模块B-Windows解析题目在DC2上安装及配置软RAID 5。在安装好的DC2虚拟机中添加三块10G虚拟磁盘。组成RAID 5，磁盘分区命名为卷标H盘：Raid5。手动测试破坏一块磁盘，做RAID磁盘修复，确认RAID 5配置完毕。配置步骤关闭虚拟机，添加3块10G磁…...

编程日记 2023/12/22 5:35:54

使用Docker运行镜像文件与设置端口

1，创建镜像文件前准备 # 使用基础镜像FROM alpine:latest# 设置工作目录WORKDIR /app# 复制应用程序文件到镜像中COPY . .# 暴露容器的端口不会自动将容器的端口映射到宿主机上 docker run -d -p <宿主机端口>:7080 <镜像名称>EXPOSE 7080# 定义容器启…...

编程日记 2023/12/22 5:30:50

Centos 8.5 Oracle12c安装

由于多次安装踩坑，所以本次写了一份12c安装的完整版。可以直接使用。一、安装数据库基本信息名称值主机名 database 操作系统 CentOS Linux release 8.5.2111 Oracle用户名/密码 oracle Oracle 版本 12c Enterprise Edition Release 12.2.0.1.0 oracle…...

编程日记 2023/12/22 5:29:49

Apache Tomcat httpoxy 安全漏洞 CVE-2016-5388 已亲自复现

Apache Tomcat httpoxy 安全漏洞 CVE-2016-5388 已亲自复现漏洞名称漏洞描述影响版本漏洞复现环境搭建漏洞利用修复建议总结漏洞名称漏洞描述在Apache Tomcat中发现了一个被归类为关键的漏洞，该漏洞在8.5.4(Application Server Soft ware)以下。受影响的是组…...

编程日记 2023/12/22 5:24:43

ChatGLM3-6B 的调用参数说明，chat 与stream_chat 接口函数的参数说明

ChatGLM3-6B 是一个语言大模型，最近在评估这个模型，但发现它的文档有限，只能从demo代码中猜测调用的参数的含义，准确度是有限的；于是，通过查看源代码来研究，目前整理笔记如下： Chat…...

编程日记 2023/12/22 5:23:41

Vuex的学习-2

Vuex的核心概念 StateMutationAction 1.State State提供唯一的公共数据源，所有共享的数据都统一放在Store的State中进行存储。 const store new Vuex.Store({state : { count: 0 } }) 这是渲染的页面组件访问数据的第一种方式组件访问数据的第二种方式 // 1…...

编程日记 2023/12/22 5:21:40

智慧安防视频监控EasyCVR如何通过回调接口向第三方平台推送RTSP视频通道离线通知

安防视频监控系统EasyCVR能在局域网、公网、专网等复杂的网络环境中部署，可支持4G、5G、WiFi、有线等方式进行视频的接入与传输、处理和分发。平台能将接入的视频流进行汇聚、转码、多格式输出和分发，具体包括：RTMP、RTSP、HTTP-FLV、WebSock…...

编程日记 2023/12/22 5:16:35

Scrum项目管理流程及免费敏捷工具

项目启动： 团队明确项目愿景、目标和范围，确定项目范围和优先级，并建立团队以及开展初步计划。制定产品待办事项清单（Product Backlog）： 定义项目所需功能、任务和需求列表，并按优先级排序…...

编程日记 2023/12/22 5:15:34

大型医院PACS系统源码，影像存储与传输系统源码，支持多种图像处理及三维重建功能

PACS系统是医院影像科室中应用的一种系统，主要用于获取、传输、存档和处理医学影像。它通过各种接口，如模拟、DICOM和网络，以数字化的方式将各种医学影像，如核磁共振、CT扫描、超声波等保存起来，并在需要时能够快速调取…...

编程日记 2023/12/22 5:06:27

HDFS NFS Gateway(环境配置，超级详细！！)

HDFS NFS Gateway简介: HDFS NFS Gateway是Hadoop Distributed File System（HDFS）中的一个组件，它允许客户端通过NFS（Network File System，网络文件系统）与HDFS进行交互。具体来说，HDFS NFS…...

编程日记 2023/12/22 5:04:23

nginx 离线安装 https反向代理

这里写自定义目录标题安装步骤1.安装nginx所需依赖1.1 安装gcc和gcc-c1.1.1下载依赖包1.1.2 上传依赖包1.1.3安装依赖 1.2 安装pcre1.2.1 下载pcre1.2.2 上传解压安装包1.2.3 编译安装 1.3 下载安装zlib1.3.1 下载zlib1.3.2 上传解压安装包1.3.3 编译安装 1.4 下载安装openssl…...

编程日记 2023/12/22 4:59:19

Linux Centos 配置 Docker 国内镜像加速

在使用 Docker 进行容器化部署时，由于国外的 Docker 镜像源速度较慢，我们可以配置 Docker 使用国内的镜像加速器，以提高下载和部署的效率。本文将介绍如何在 CentOS 系统上配置 Docker 使用国内镜像加速。步骤一：安装 Docker 首…...

编程日记 2023/12/22 4:58:18

中心下标-----来自力扣

本题使用go语言完成： 思路：1.先求出整个数组的和 2.用一个循环整个和减去左和看是否等于右和，如果等于，返回索引下标寻找数组的中心索引给你一个整数数组 nums ，请计算数组的中心下标。数组中心下标是数组的一…...

编程日记 2023/12/22 4:55:15

手写单链表（指针）（next域）附图

目录创建文件： 具体实现： 首先是头插。注意：一定要注意：再定义tmp时，要给它赋一个初始值（推荐使用 new list_next) 接着是尾插： 随后是中间插： 然后是最简单的改值&#xf…...

编程日记 2023/12/22 4:51:12

关于with torch.no_grad:的一些小问题

with torch.no_grad:是截断梯度记录的，新生成的数据的都不记录梯度，但是今天产生了一点小疑惑，如果存在多层函数嵌入，是不是函数内所有的数据都不记录梯度，验证了一下，确实是的。 import torch x torch.r…...

编程日记 2023/12/22 4:45:06

大创项目推荐深度学习机器视觉人脸识别系统 - opencv python

文章目录 0 前言1 机器学习-人脸识别过程人脸检测人脸对其人脸特征向量化人脸识别 2 深度学习-人脸识别过程人脸检测人脸识别Metric Larning 3 最后 0 前言 🔥 优质竞赛项目系列，今天要分享的是 🚩 深度学习机器视觉人脸识别系统该项目…...

编程日记 2023/12/22 4:44:05

【PostGIS】空间数据库-常用空间函数

记录一些常用的空间函数： 1、转换函数在几何图形和外部数据格式之间进行转换的函数。 -- 将文本表示转换为几何类型 -- 结果：0101000000000000000000F03F000000000000F03F SELECT st_geomfromtext(point(1 1),0);-- 将几何类型转换为文本表示 -- 结果…...

编程日记 2023/12/22 4:35:57

程序员的50大JVM面试问题及答案

文章目录 1.JDK、JRE、JVM关系？2.启动程序如何查看加载了哪些类，以及加载顺序？3. class字节码文件10个主要组成部分?4.画一下jvm内存结构图？5.程序计数器6.Java虚拟机栈7.本地方法栈8.Java堆9.方法区10.运行时常量池？…...

编程日记 2023/12/22 4:31:54

C++_核心编程_多态案例二-制作饮品

#include <iostream> #include <string> using namespace std;/*制作饮品的大致流程为：煮水 - 冲泡 - 倒入杯中 - 加入辅料利用多态技术实现本案例，提供抽象制作饮品基类，提供子类制作咖啡和茶叶*//*基类*/ class AbstractDr…...

编程新知 2025/10/28 17:51:39

Linux链表操作全解析

Linux C语言链表深度解析与实战技巧一、链表基础概念与内核链表优势1.1 为什么使用链表？1.2 Linux 内核链表与用户态链表的区别二、内核链表结构与宏解析常用宏/函数三、内核链表的优点四、用户态链表示例五、双向循环链表在内核中的实现优势5.1 插入效率5.2 安全…...

编程新知 2025/8/28 9:42:18

反向工程与模型迁移：打造未来商品详情API的可持续创新体系

在电商行业蓬勃发展的当下，商品详情API作为连接电商平台与开发者、商家及用户的关键纽带，其重要性日益凸显。传统商品详情API主要聚焦于商品基本信息（如名称、价格、库存等）的获取与展示，已难以满足市场对个性化、智能…...

编程新知 2025/9/15 5:56:53

Java-41 深入浅出 Spring - 声明式事务的支持事务配置 XML模式 XML+注解模式

点一下关注吧！！！非常感谢！！持续更新！！！ 🚀 AI篇持续更新中！（长期更新） 目前2025年06月05日更新到： AI炼丹日志-28 - Aud…...

编程新知 2025/10/27 13:41:34

【配置 YOLOX 用于按目录分类的图片数据集】

现在的图标点选越来越多，如何一步解决，采用 YOLOX 目标检测模式则可以轻松解决要在 YOLOX 中使用按目录分类的图片数据集（每个目录代表一个类别，目录下是该类别的所有图片），你需要进行以下配置步骤&#x…...

编程新知 2025/10/27 21:58:20

使用 Streamlit 构建支持主流大模型与 Ollama 的轻量级统一平台

🎯 使用 Streamlit 构建支持主流大模型与 Ollama 的轻量级统一平台 📌 项目背景随着大语言模型（LLM）的广泛应用，开发者常面临多个挑战：各大模型（OpenAI、Claude、Gemini、Ollama）接口风格不统一；缺乏一个统一平台进行模型调用与测试；本地模型 Ollama 的集成与前…...

编程新知 2025/10/25 4:50:26

使用Matplotlib创建炫酷的3D散点图：数据可视化的新维度

文章目录基础实现代码代码解析进阶技巧1. 自定义点的大小和颜色2. 添加图例和样式美化3. 真实数据应用示例实用技巧与注意事项完整示例（带样式）应用场景在数据科学和可视化领域，三维图形能为我们提供更丰富的数据洞察。本文将手把手教你如何使用Python的Matplotlib库创建引…...

编程新知 2025/10/4 3:01:43

Spring是如何解决Bean的循环依赖：三级缓存机制

1、什么是 Bean 的循环依赖在 Spring框架中，Bean 的循环依赖是指多个 Bean 之间‌互相持有对方引用‌，形成闭环依赖关系的现象。多个 Bean 的依赖关系构成环形链路，例如：双向依赖：Bean A 依赖 Bean B，同时 Bean B 也依赖 Bean A（A↔B）。链条循环： Bean A → Bean…...

编程新知 2025/7/25 1:21:53