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

10 Vue3中v-html指令的用法

news 文章来源：https://blog.csdn.net/qq_37703224/article/details/135075759 2024/11/18 12:15:52

概述

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

架构设计系列之前端架构和后端架构的区别和联系

前端架构和后端架构都是软件系统中最关键的架构层&#xff0c;负责处理不同方面的任务和逻辑&#xff0c;两者之间是存在一些区别和联系的&#xff0c;我会从以下几个方面来阐述&#xff1a; 一、定位和职责 前端架构 主要关注用户界面和用户体验&#xff0c;负责处理用户与…...

编程日记 2023/12/22 4:26:50

UE5 水材质注意要点

1、两个法线反向交替流动&#xff0c;可以去观感假的现象 2、水面延边的透明度低 3、增加水面延边的浪花 4、增加折射 折射要整体质量至少在High才有效果 改为半透明材质没有法线信息&#xff1f; 5、处理反射效果 勾选为true 找到这个放在水域 勾为false&#xff0c;即可有非…...

编程日记 2023/12/22 4:25:49

数据安全扫描仪荣膺网络安全优秀创新成果大赛优胜奖 - 凸显多重优势

近日&#xff0c;由中国网络安全产业联盟&#xff08;CCIA&#xff09;主办、CCI数据安全工作委员会中国电子技术标准化研究院等单位承办的“2023年网络安全优秀创新成果大赛”获奖名单公布。天空卫士数据安全扫描仪&#xff08;DSS&#xff09;产品获得创新成果大赛优胜奖。 本…...

编程日记 2023/12/22 4:24:48

数据结构学习 leetcode64最小路径和

动态规划 题目&#xff1a; 建议看这里&#xff0c;有这道题详细的解析。我觉得写的挺好。 这是我在学动态规划的时候&#xff0c;动手做的一道题。 虽然我在学动态规划&#xff0c;但是我之前学了dps&#xff0c;所以我就想先用dps试着做&#xff0c;结果发现不行&#xf…...

编程日记 2023/12/22 4:21:46

导出（导入）Linux虚拟机并修改IP地址

一、导出虚拟机 说明&#xff1a;先关闭虚拟机&#xff0c;然后再进行导出。 步骤1&#xff1a;选择要导出的虚拟机 步骤2&#xff1a;选择文件菜单栏下的导出为OVF文件。 步骤3&#xff1a;将导出的文件保存至硬盘文件夹。 二、导入虚拟机 步骤1&#xff1a;选择文件菜单栏…...

编程日记 2023/12/22 4:16:42

OpenCV4工业缺陷检测的六种方法

&#x1f468;‍&#x1f393;博主简介 &#x1f3c5;云计算领域优质创作者   &#x1f3c5;华为云开发者社区专家博主   &#x1f3c5;阿里云开发者社区专家博主 &#x1f48a;交流社区&#xff1a;运维交流社区 欢迎大家的加入&#xff01; &#x1f40b; 希望大家多多支…...

编程日记 2023/12/22 4:14:41

ICC2：Less than minimum edge length和Concave convex edge enclosure

我正在「拾陆楼」和朋友们讨论有趣的话题，你⼀起来吧？ 拾陆楼知识星球入口 首先，要介绍一下这两种drc Less than minimum edge length对应的tf rule如下: 而Concave convex edge enclosure对应图示和tf 规则如下，可...

编程日记 2023/12/22 4:13:40

RouterSrv-DHCP

2023年全国网络系统管理赛项真题 模块B-Windows解析 题目 安装和配置DHCP relay服务，为办公区域网络提供地址上网。DHCP服务器位于AppSrv服务器上。拆分DHCP服务器上的作用域，拆分的百分比为7:3。InsideCli优先从RouterSrv获取地址。配置步骤 安装和配置DHCP relay服务，为办…...

编程日记 2023/12/22 4:11:38

【人生苦短，我学 Python】（8）文件的读写和过滤器

目录 简述 / 前言1. 文件的操作2. 过滤器2.1 more —— 逐屏显示数据2.2 sort —— 排序2.3 more 和 sort 一起用 文章传送门 简述 / 前言 上一篇我们介绍了 Python 的输入&#xff08;input&#xff09;和输出&#xff08;print&#xff09;&#xff0c;以及如何通过命令行给…...

编程日记 2023/12/22 4:10:38

智能优化算法应用：基于饥饿游戏算法3D无线传感器网络(WSN)覆盖优化 - 附代码

智能优化算法应用&#xff1a;基于饥饿游戏算法3D无线传感器网络(WSN)覆盖优化 - 附代码 文章目录 智能优化算法应用&#xff1a;基于饥饿游戏算法3D无线传感器网络(WSN)覆盖优化 - 附代码1.无线传感网络节点模型2.覆盖数学模型及分析3.饥饿游戏算法4.实验参数设定5.算法结果6.…...

编程日记 2023/12/22 4:09:37

做暧暧网站/google搜索优化

&!"#$%操作系统结构分析&郭玉东 王非非 编著西安电子科技大学出版社2 0 0 2内 容 简 介本书是对Linux 操作系统内部结构的分析&#xff0c;其内容直接来源于Linux 操作系统的源代码&#xff0c;是对作者多年来从事Linux 教学和科研工作的总结。全书从操作系统的引…...

编程日记 2024/11/18 11:30:12

上海网站建设推荐案例/设计模板网站

C通过虚函数来实现多态&#xff0c;也就是让父类指针指向子类&#xff0c;在运行时根据指针指向的对象的实际类型来确定调用子类或者父类中的某个函数。 1 class Base2 {3 public :4 virtual void f() { cout<<"Base::f()"<<endl ; }5 virtual v…...

编程日记 2024/11/18 8:20:34

行政机关 网站源码/google搜索关键词热度

一. windows 系统下搭建jenkins环境1.1 jenkins环境搭建和构建job流程图1.2 安装jdkJDK下载地址&#xff1a; http://www.oracle.com/technetwork/java/javase/downloads/jdk8-downloads-2133151.html选择对应系统的安装包下载&#xff1a;配置环境变量:新建JAVA_HOME系统环境…...

编程日记 2024/11/18 6:34:44

电商网站制作方案/网络推广文案策划

Cause: com.mysql.jdbc.exceptions.jdbc4.MySQLSyntaxErrorException: In aggregated query without GROUP BY, expression #3 of SELECT list contains nonaggregated column...

编程日记 2024/11/18 5:34:53

朋友做的网站图片不显示/贵阳网站建设推广

一&#xff1a;标准的JavaWeb工程的工程结构 一个JavaWeb应用&#xff0c;需要有一个目录结构&#xff0c;tomcat才能够对其进行运行&#xff1b; ● tomcat安装目录/webapps/&#xff1a;所有的web应用应该存放在这个目录&#xff1b;在/webapps/目录下&#xff0c;所有的工…...

编程日记 2024/11/18 2:20:35

唐山高端网站建设/国内重大新闻10条

author&#xff1a;skate time&#xff1a;2013/03/01 mysql在线无性能影响删除7G大表 如何在mysql数据库里删除7G(或更大)大表&#xff0c;使其又不影响服务器的io&#xff0c;导致性能下降影响业务。先不说其是mysql表&#xff0c;就是普通文件&#xff0c;如果直接rm删除&a…...

编程日记 2024/11/18 1:44:05