10 Vue3中v-html指令的用法
概述
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代码，可能会导致整个网页发…...
华为数通方向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…...
DC-磁盘管理
2023年全国网络系统管理赛项真题 模块B-Windows解析 题目 在DC2上安装及配置软RAID 5。在安装好的DC2虚拟机中添加三块10G虚拟磁盘。组成RAID 5，磁盘分区命名为卷标H盘：Raid5。手动测试破坏一块磁盘，做RAID磁盘修复，确认RAID 5配置完毕。配置步骤 关闭虚拟机，添加3块10G磁…...
使用Docker运行镜像文件与设置端口
1，创建镜像文件前准备 # 使用基础镜像FROM alpine:latest# 设置工作目录WORKDIR /app# 复制应用程序文件到镜像中COPY . .# 暴露容器的端口 不会自动将容器的端口映射到宿主机上 docker run -d -p <宿主机端口>:7080 <镜像名称>EXPOSE 7080# 定义容器启…...
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…...
Apache Tomcat httpoxy 安全漏洞 CVE-2016-5388 已亲自复现
Apache Tomcat httpoxy 安全漏洞 CVE-2016-5388 已亲自复现 漏洞名称漏洞描述影响版本 漏洞复现环境搭建漏洞利用 修复建议总结 漏洞名称 漏洞描述 在Apache Tomcat中发现了一个被归类为关键的漏洞，该漏洞在8.5.4(Application Server Soft ware)以下。受影响的是组…...
ChatGLM3-6B 的调用参数说明，chat 与stream_chat 接口函数的参数说明
ChatGLM3-6B 是一个语言大模型，最近在评估这个模型，但发现它的文档有限，只能从demo代码中猜测调用的参数的含义，准确度是有限的；于是，通过查看源代码来研究，目前整理笔记如下： Chat…...
Vuex的学习-2
Vuex的核心概念 StateMutationAction 1.State State提供唯一的公共数据源，所有共享的数据都统一放在Store的State中进行存储。 const store new Vuex.Store({state : { count: 0 } }) 这是渲染的页面 组件访问数据的第一种方式 组件访问数据的第二种方式 // 1…...
智慧安防视频监控EasyCVR如何通过回调接口向第三方平台推送RTSP视频通道离线通知
安防视频监控系统EasyCVR能在局域网、公网、专网等复杂的网络环境中部署，可支持4G、5G、WiFi、有线等方式进行视频的接入与传输、处理和分发。平台能将接入的视频流进行汇聚、转码、多格式输出和分发，具体包括：RTMP、RTSP、HTTP-FLV、WebSock…...
Scrum项目管理流程及免费敏捷工具
项目启动： 团队明确项目愿景、目标和范围，确定项目范围和优先级，并建立团队以及开展初步计划。 制定产品待办事项清单（Product Backlog）： 定义项目所需功能、任务和需求列表，并按优先级排序…...
大型医院PACS系统源码，影像存储与传输系统源码，支持多种图像处理及三维重建功能
PACS系统是医院影像科室中应用的一种系统，主要用于获取、传输、存档和处理医学影像。它通过各种接口，如模拟、DICOM和网络，以数字化的方式将各种医学影像，如核磁共振、CT扫描、超声波等保存起来，并在需要时能够快速调取…...
HDFS NFS Gateway(环境配置，超级详细！！)
HDFS NFS Gateway简介: HDFS NFS Gateway是Hadoop Distributed File System（HDFS）中的一个组件，它允许客户端通过NFS（Network File System，网络文件系统）与HDFS进行交互。具体来说，HDFS NFS…...
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…...
Linux Centos 配置 Docker 国内镜像加速
在使用 Docker 进行容器化部署时，由于国外的 Docker 镜像源速度较慢，我们可以配置 Docker 使用国内的镜像加速器，以提高下载和部署的效率。本文将介绍如何在 CentOS 系统上配置 Docker 使用国内镜像加速。 步骤一：安装 Docker 首…...
中心下标-----来自力扣
本题使用go语言完成： 思路：1.先求出整个数组的和 2.用一个循环整个和减去左和看是否等于右和，如果等于，返回索引下标 寻找数组的中心索引 给你一个整数数组 nums ，请计算数组的 中心下标 。 数组 中心下标 是数组的一…...
手写单链表（指针）（next域）附图
目录 创建文件： 具体实现： 首先是头插。 注意：一定要注意：再定义tmp时，要给它赋一个初始值（推荐使用 new list_next) 接着是尾插： 随后是中间插： 然后是最简单的改值…...
关于with torch.no_grad:的一些小问题
with torch.no_grad:是截断梯度记录的，新生成的数据的都不记录梯度，但是今天产生了一点小疑惑，如果存在多层函数嵌入，是不是函数内所有的数据都不记录梯度，验证了一下，确实是的。 import torch x torch.r…...
大创项目推荐 深度学习 机器视觉 人脸识别系统 - opencv python
文章目录 0 前言1 机器学习-人脸识别过程人脸检测人脸对其人脸特征向量化人脸识别 2 深度学习-人脸识别过程人脸检测人脸识别Metric Larning 3 最后 0 前言 🔥 优质竞赛项目系列，今天要分享的是 🚩 深度学习 机器视觉 人脸识别系统 该项目…...
【PostGIS】空间数据库-常用空间函数
记录一些常用的空间函数： 1、转换函数 在几何图形和外部数据格式之间进行转换的函数。 -- 将文本表示转换为几何类型 -- 结果：0101000000000000000000F03F000000000000F03F SELECT st_geomfromtext(point(1 1),0);-- 将几何类型转换为文本表示 -- 结果…...
程序员的50大JVM面试问题及答案
文章目录 1.JDK、JRE、JVM关系？2.启动程序如何查看加载了哪些类，以及加载顺序？3. class字节码文件10个主要组成部分?4.画一下jvm内存结构图？5.程序计数器6.Java虚拟机栈7.本地方法栈8.Java堆9.方法区10.运行时常量池？…...
Linux应用开发之网络套接字编程(实例篇)
服务端与客户端单连接 服务端代码 #include <sys/socket.h> #include <sys/types.h> #include <netinet/in.h> #include <stdio.h> #include <stdlib.h> #include <string.h> #include <arpa/inet.h> #include <pthread.h> …...
脑机新手指南（八）：OpenBCI_GUI：从环境搭建到数据可视化（下）
一、数据处理与分析实战 （一）实时滤波与参数调整 基础滤波操作 60Hz 工频滤波：勾选界面右侧 “60Hz” 复选框，可有效抑制电网干扰（适用于北美地区，欧洲用户可调整为 50Hz）。 平滑处理&…...
在HarmonyOS ArkTS ArkUI-X 5.0及以上版本中，手势开发全攻略：
在 HarmonyOS 应用开发中，手势交互是连接用户与设备的核心纽带。ArkTS 框架提供了丰富的手势处理能力，既支持点击、长按、拖拽等基础单一手势的精细控制，也能通过多种绑定策略解决父子组件的手势竞争问题。本文将结合官方开发文档，…...
工业自动化时代的精准装配革新：迁移科技3D视觉系统如何重塑机器人定位装配
AI3D视觉的工业赋能者 迁移科技成立于2017年，作为行业领先的3D工业相机及视觉系统供应商，累计完成数亿元融资。其核心技术覆盖硬件设计、算法优化及软件集成，通过稳定、易用、高回报的AI3D视觉系统，为汽车、新能源、金属制造等行…...
（转）什么是DockerCompose?它有什么作用？
一、什么是DockerCompose? DockerCompose可以基于Compose文件帮我们快速的部署分布式应用，而无需手动一个个创建和运行容器。 Compose文件是一个文本文件，通过指令定义集群中的每个容器如何运行。 DockerCompose就是把DockerFile转换成指令去运行。 …...
AI书签管理工具开发全记录（十九）：嵌入资源处理
1.前言 📝 在上一篇文章中，我们完成了书签的导入导出功能。本篇文章我们研究如何处理嵌入资源，方便后续将资源打包到一个可执行文件中。 2.embed介绍 🎯 Go 1.16 引入了革命性的 embed 包，彻底改变了静态资源管理的…...
LINUX 69 FTP 客服管理系统 man 5 /etc/vsftpd/vsftpd.conf
FTP 客服管理系统 实现kefu123登录，不允许匿名访问，kefu只能访问/data/kefu目录，不能查看其他目录 创建账号密码 useradd kefu echo 123|passwd -stdin kefu [rootcode caozx26420]# echo 123|passwd --stdin kefu 更改用户 kefu 的密码…...
uniapp 开发ios， xcode 提交app store connect 和 testflight内测
uniapp 中配置 配置manifest 文档：manifest.json 应用配置 | uni-app官网 hbuilderx中本地打包 下载IOS最新SDK 开发环境 | uni小程序SDK hbulderx 版本号：4.66 对应的sdk版本 4.66 两者必须一致 本地打包的资源导入到SDK 导入资源 | uni小程序SDK …...
高端性能封装正在突破性能壁垒，其芯片集成技术助力人工智能革命。
2024 年，高端封装市场规模为 80 亿美元，预计到 2030 年将超过 280 亿美元，2024-2030 年复合年增长率为 23%。 细分到各个终端市场，最大的高端性能封装市场是“电信和基础设施”，2024 年该市场创造了超过 67% 的收入。…...
【笔记】AI Agent 项目 SUNA 部署 之 Docker 构建记录
#工作记录 构建过程记录 Microsoft Windows [Version 10.0.27871.1000] (c) Microsoft Corporation. All rights reserved.(suna-py3.12) F:\PythonProjects\suna>python setup.py --admin███████╗██╗ ██╗███╗ ██╗ █████╗ ██╔════╝…...