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/

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/235831.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

Leetcode 1005 K 次取反后最大化的数组和

题意理解&#xff1a; 有k次对元素取反的次数&#xff0c;要求k次取反&#xff0c;消耗完&#xff0c;且使最后的数组和最大。 解题思路&#xff1a; 采用贪心的思路来解题。则需要定义局部最优解和全局最优解。 全局最优解&#xff1a;最终的数组和最大 则我们需要保证绝对值大…

如何设计树形结构

作者简介&#xff1a;大家好&#xff0c;我是smart哥&#xff0c;前中兴通讯、美团架构师&#xff0c;现某互联网公司CTO 联系qq&#xff1a;184480602&#xff0c;加我进群&#xff0c;大家一起学习&#xff0c;一起进步&#xff0c;一起对抗互联网寒冬 前置知识&#xff1a;前…

UE5 C++(八)— 创建Actor、添加组件

文章目录 Actor和组件介绍Actor组件&#xff08;Component&#xff09; 在蓝图中创建Actor&#xff0c;添加组件在C中创建Actor&#xff0c;添加组件 Actor和组件介绍 Actor 详细介绍可以去看 Actor和几何体官方文档 还有大钊的这篇文章《InsideUE4》GamePlay架构&#xff0…

【算法与数据结构】135、LeetCode分发糖果

文章目录 一、题目二、解法三、完整代码 所有的LeetCode题解索引&#xff0c;可以看这篇文章——【算法和数据结构】LeetCode题解。 一、题目 二、解法 思路分析&#xff1a;本题的思路是要相比较一边&#xff0c;然后在比较另外一边&#xff0c;左右两边一起比较的代码非常难写…

配置BGP的基本示例

一、组网需求&#xff1a; 需要在所有Switch间运行BGP协议&#xff0c;SwitchA、SwitchB之间建立EBGP连接&#xff0c;SwitchB、SwitchC和SwitchD之间建立IBGP全连接。 请确保该场景下互联接口的STP处于未使能状态。因为在使能STP的环形网络中&#xff0c;如果用交换机的VLAN…

谷歌手机安装证书到根目录

1、前提你已经root&#xff0c;安装好面具 2&#xff0c;下载movecert模块&#xff0c;自动帮你把证书从用户证书移动成系统证书 视频教程&#xff0c;手机为谷歌手机 https://www.bilibili.com/video/BV1pG4y1A7Cj?p11&vd_source9c0a32b00d6d59fecae05b4133f22f06 软件下…

持续集成交付CICD:基于ArgoCD 的GitOps 自动化完成前端项目应用发布与回滚

目录 一、实验 1. 环境 2. K8S master节点部署Argo CD 3.基于ArgoCD 实现GitOps &#xff08;同步部署文件&#xff09; 4.基于ArgoCD 实现GitOps &#xff08;同步HELM文件&#xff09; 二、问题 1. ArgoCD 连接K8S集群状态为 Unknown 2.ArgoCD 创建application失败 …

〖大前端 - 基础入门三大核心之JS篇(58)〗- 面向对象案例

说明&#xff1a;该文属于 大前端全栈架构白宝书专栏&#xff0c;目前阶段免费&#xff0c;如需要项目实战或者是体系化资源&#xff0c;文末名片加V&#xff01;作者&#xff1a;哈哥撩编程&#xff0c;十余年工作经验, 从事过全栈研发、产品经理等工作&#xff0c;目前在公司…

Linux(一)Linux理论

文章目录 一、Linux概述1.1 体系结构1.1.1 Linux内核1.1.2 用户态与内核态1.1.3 交换空间1.1.4 CLI和GUI 1.2 开机启动过程1.3 系统运行级别1.4 Linux进程1.4.1 Linux进程通信的方法1.4.2 Linux进程状态 二、文件2.1 Linux文件系统2.2 目录结构2.3 绝对路径和相对路径2.4 日志文…

[SWPUCTF 2021 新生赛]caidao

打开环境 这显示的就是一句话木马呗&#xff0c;直接用中国蚁剑连接&#xff0c;密码是wllm 根目录找到flag

Python Opencv实践 - 手势音量控制

本文基于前面的手部跟踪功能做一个手势音量控制功能&#xff0c;代码用到了前面手部跟踪封装的HandDetector.这篇文章在这里&#xff1a; Python Opencv实践 - 手部跟踪-CSDN博客文章浏览阅读626次&#xff0c;点赞11次&#xff0c;收藏7次。使用mediapipe库做手部的实时跟踪&…

c++输出简单日志带日期时间功能

最近项目需要简单输出日志&#xff0c;用巨大的日志类未免繁琐&#xff0c;于是写了这个简单的日志函数&#xff0c;带日期&#xff0c;MFC下可以直接使用。 直接上代码&#xff1a; template <typename T> std::string ConvertToStringS(T value) {std::stringstream …

nginx转发ingress-nginx问题记录

背景 想直接通过域名访问k8s上的服务. 想到k8s上可以直接通过ingress配置. 不过ingress默认启动的端口3xxxxx. 一般不可能让用户访问我们的服务加上端口. 所以现在要解决直接通过80端口访问ingress的问题. 方案 修改ingress-nginx端口(这个是在网上搜到的方案, 但未选择) 这…

【数据结构和算法】定长子串中元音的最大数目

其他系列文章导航 Java基础合集数据结构与算法合集 设计模式合集 多线程合集 分布式合集 ES合集 文章目录 其他系列文章导航 文章目录 前言 一、题目描述 二、题解 2.1 方法一&#xff1a;滑动窗口 2.2 方法二&#xff1a;滑动窗口优化版 三、代码 3.1 方法一&#xf…

Spring Boot构建项目常用注解

忙着去耍帅&#xff0c;后期补充完整.....................................

搭建esp32-idf开发环境并烧入第一个程序

ESP32下载idf并烧入第一个程序 一.官网下载idf安装包二.安装idf三 .测试安装是否成功3.1进入idf控制台3.2 查看安装版本3.3 编译工程 四.下载程序4.1查看所在端口4.2下载程序4.3 监听串口 一.官网下载idf安装包 点击下载 如图&#xff1a; 我们选择离线下载&#xff0c;注意…

Qt 国际化——创建中英文翻译步骤

Qt 国际化——创建中英文翻译步骤 说明&#xff1a;之前我的csdn博客&#xff0c;第一篇文章发表的就是Qt国际化的文章&#xff08;点击打开&#xff09;&#xff0c;写的也过于简单了&#xff1a; 今天&#xff0c;这篇文章再详细的记录下&#xff0c;中英文翻译的步骤。 一…

diffusers-训练自己的模型

一、搭建dataset 基于datasets这个库创建的dataloader&#xff0c;底层代码还待探索 二、修改模型结构&#xff08;非必要&#xff09; 尽量可以利用已有的预训练权重去训练模型&#xff0c;但是权重并不一定能够完全是适配&#xff0c;所以还需要自己来视情况做修改&#xf…

AttributeError: module ‘_winapi‘ has no attribute ‘SYNCHRONIZE‘解决方案

大家好,我是爱编程的喵喵。双985硕士毕业,现担任全栈工程师一职,热衷于将数据思维应用到工作与生活中。从事机器学习以及相关的前后端开发工作。曾在阿里云、科大讯飞、CCF等比赛获得多次Top名次。现为CSDN博客专家、人工智能领域优质创作者。喜欢通过博客创作的方式对所学的…

【SplaTAM】基于RGB-D类型SplaTAM的定位与重建

SplaTAM ubuntu配置与运行记录 1. 资料收集2. 环境配置与运行注意问题3. 在线运行 近期各种定会涌现出一种新的基于高斯的方法&#xff0c;备受关注&#xff0c;这里我们也来学习下sota效果的slam用于定位和重建。 1. 资料收集 coda link3D Gaussians 2.1 Dynamic 3D Gaussian…