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

10 Vue3中v-html指令的用法

news 2026/2/8 2:05:39

概述

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

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

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

Centos 8.5 Oracle12c安装

由于多次安装踩坑&#xff0c;所以本次写了一份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中发现了一个被归类为关键的漏洞&#xff0c;该漏洞在8.5.4(Application Server Soft ware)以下。受影响的是组…...

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

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

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

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

Vuex的学习-2

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

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

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

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

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

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

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

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

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

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

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

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

HDFS NFS Gateway简介: ​ HDFS NFS Gateway是Hadoop Distributed File System&#xff08;HDFS&#xff09;中的一个组件&#xff0c;它允许客户端通过NFS&#xff08;Network File System&#xff0c;网络文件系统&#xff09;与HDFS进行交互。具体来说&#xff0c;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 进行容器化部署时&#xff0c;由于国外的 Docker 镜像源速度较慢&#xff0c;我们可以配置 Docker 使用国内的镜像加速器&#xff0c;以提高下载和部署的效率。本文将介绍如何在 CentOS 系统上配置 Docker 使用国内镜像加速。 步骤一&#xff1a;安装 Docker 首…...

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

uniapp 对接腾讯云IM群组成员管理（增删改查）

UniApp 实战&#xff1a;腾讯云IM群组成员管理&#xff08;增删改查&#xff09; 一、前言 在社交类App开发中&#xff0c;群组成员管理是核心功能之一。本文将基于UniApp框架&#xff0c;结合腾讯云IM SDK&#xff0c;详细讲解如何实现群组成员的增删改查全流程。 权限校验…...

编程新知 2026/1/13 9:59:27

论文解读：交大港大上海AI Lab开源论文 | 宇树机器人多姿态起立控制强化学习框架（二）

HoST框架核心实现方法详解 - 论文深度解读（第二部分） 《Learning Humanoid Standing-up Control across Diverse Postures》 系列文章： 论文深度解读 + 算法与代码分析（二） 作者机构： 上海AI Lab, 上海交通大学, 香港大学, 浙江大学, 香港中文大学 论文主题： 人形机器人…...

编程新知 2026/1/20 19:54:35

盘古信息PCB行业解决方案：以全域场景重构，激活智造新未来

一、破局&#xff1a;PCB行业的时代之问 在数字经济蓬勃发展的浪潮中&#xff0c;PCB&#xff08;印制电路板&#xff09;作为 “电子产品之母”&#xff0c;其重要性愈发凸显。随着 5G、人工智能等新兴技术的加速渗透&#xff0c;PCB行业面临着前所未有的挑战与机遇。产品迭代…...

编程新知 2026/2/7 17:29:24

大型活动交通拥堵治理的视觉算法应用

大型活动下智慧交通的视觉分析应用 一、背景与挑战 大型活动&#xff08;如演唱会、马拉松赛事、高考中考等&#xff09;期间&#xff0c;城市交通面临瞬时人流车流激增、传统摄像头模糊、交通拥堵识别滞后等问题。以演唱会为例&#xff0c;暖城商圈曾因观众集中离场导致周边…...

编程新知 2026/1/23 7:15:40

【JVM】- 内存结构

引言 JVM&#xff1a;Java Virtual Machine 定义&#xff1a;Java虚拟机&#xff0c;Java二进制字节码的运行环境好处&#xff1a; 一次编写&#xff0c;到处运行自动内存管理&#xff0c;垃圾回收的功能数组下标越界检查&#xff08;会抛异常&#xff0c;不会覆盖到其他代码…...

编程新知 2026/1/30 13:40:43

蓝牙 BLE 扫描面试题大全(2)：进阶面试题与实战演练

前文覆盖了 BLE 扫描的基础概念与经典问题蓝牙 BLE 扫描面试题大全(1)&#xff1a;从基础到实战的深度解析-CSDN博客&#xff0c;但实际面试中&#xff0c;企业更关注候选人对复杂场景的应对能力&#xff08;如多设备并发扫描、低功耗与高发现率的平衡&#xff09;和前沿技术的…...

编程新知 2026/2/5 3:41:42

SpringCloudGateway 自定义局部过滤器

场景&#xff1a; 将所有请求转化为同一路径请求&#xff08;方便穿网配置&#xff09;在请求头内标识原来路径&#xff0c;然后在将请求分发给不同服务 AllToOneGatewayFilterFactory import lombok.Getter; import lombok.Setter; import lombok.extern.slf4j.Slf4j; impor…...

编程新知 2026/2/1 4:53:36

智能AI电话机器人系统的识别能力现状与发展水平

一、引言 随着人工智能技术的飞速发展&#xff0c;AI电话机器人系统已经从简单的自动应答工具演变为具备复杂交互能力的智能助手。这类系统结合了语音识别、自然语言处理、情感计算和机器学习等多项前沿技术&#xff0c;在客户服务、营销推广、信息查询等领域发挥着越来越重要…...

编程新知 2025/6/11 3:05:02

基于TurtleBot3在Gazebo地图实现机器人远程控制

1. TurtleBot3环境配置 # 下载TurtleBot3核心包 mkdir -p ~/catkin_ws/src cd ~/catkin_ws/src git clone -b noetic-devel https://github.com/ROBOTIS-GIT/turtlebot3.git git clone -b noetic https://github.com/ROBOTIS-GIT/turtlebot3_msgs.git git clone -b noetic-dev…...

编程新知 2026/2/6 11:54:58

【JVM面试篇】高频八股汇总——类加载和类加载器

目录 1. 讲一下类加载过程&#xff1f; 2. Java创建对象的过程&#xff1f; 3. 对象的生命周期&#xff1f; 4. 类加载器有哪些&#xff1f; 5. 双亲委派模型的作用&#xff08;好处&#xff09;&#xff1f; 6. 讲一下类的加载和双亲委派原则&#xff1f; 7. 双亲委派模…...

编程新知 2026/1/31 11:18:29