10 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/233409.shtml

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

相关文章

org.slf4j日志组件实现日志功能

slf4j 全称是Simple Logging Facade for Java。facade是一种设计模式。 slf4j 是一个抽象程度更高的日志组件&#xff0c;本身并不提供实际的日志功能。实际的日志功能是通过log4j等日志组件实现&#xff0c;而使用者只需要关心 slf4j 给出的API。 slf4j 仅仅是一个为Java程序提…

SQL面试题挑战01:打折日期交叉问题

目录 问题&#xff1a;SQL解答&#xff1a;第一种方式&#xff1a;第二种方式&#xff1a; 问题&#xff1a; 如下为某平台的商品促销数据&#xff0c;字段含义分别为品牌名称、打折开始日期、打折结束日期&#xff0c;现在要计算每个品牌的打折销售天数&#xff08;注意其中的…

maven 项目导入异常问题

问题如下 一、 tomcat正再运行的包是哪一个 不同构建、打包情况下分别运行 out\artifacts下 当直接去Project Structure下去构建artifacts 后&#xff0c;运行tomcat 则会在out下target下 reimport项目后,则会在artifacts自动生成部署包。删除tomcat之前deployment 下的包(同…

2023_Spark_实验三十:测试Flume到Kafka

实验目的&#xff1a;测试Flume采集数据发送到Kafka 实验方法&#xff1a;通过centos7集群测试&#xff0c;将flume采集的数据放到kafka中 实验步骤&#xff1a; 一、 kafka可视化工具介绍 Kafka Tool是一个用于管理和使用Apache Kafka集群的GUI应用程序。 Kafka Tool提供了…

C++常见面试题-基础部分50题

问题1&#xff1a; 解释C中的引用和指针的区别。 答案&#xff1a; 引用是变量的别名&#xff0c;而指针是一个存储变量地址的变量。引用在定义时必须初始化&#xff0c;不能重新赋值&#xff0c;而指针可以在任何时候被初始化和改变。 问题2&#xff1a; C中的类和结构体有什…

502 Bad Gateway with nginx + apache + subversion + ssl

svn commit的时候返回 unexpected http status 502 bad gateway on解决方法&#xff0c;参考&#xff1a;https://stackoverflow.com/questions/2479346/502-bad-gateway-with-nginx-apache-subversion-ssl-svn-copy 在nginx中代理svn中添加 location /svn {set $fixed_dest…

Python轴承故障诊断 (八)基于EMD-CNN-GRU并行模型的故障分类

目录 前言 1 经验模态分解EMD的Python示例 2 轴承故障数据的预处理 2.1 导入数据 2.2 制作数据集和对应标签 2.3 故障数据的EMD分解可视化 2.4 故障数据的EMD分解预处理 3 基于EMD-CNN-GRU并行模型的轴承故障诊断分类 3.1 训练数据、测试数据分组&#xff0c;数据分ba…

15 使用v-model绑定单选框

概述 使用v-model绑定单选框也比较常见&#xff0c;比如性别&#xff0c;要么是男&#xff0c;要么是女。比如单选题&#xff0c;给出多个选择&#xff0c;但是只能选择其中的一个。 在本节课中&#xff0c;我们演示一下这两种常见的用法。 基本用法 我们创建src/component…

【openssl】Linux升级openssl-1.0.1到1.1.1

文章目录 前言一、openssl是什么&#xff1f;二、使用步骤1.下载2.编译安装3.一些问题 总结 前言 记录一次openssl的升级&#xff0c;1.0.1升级到1.1.1 一、openssl是什么&#xff1f; OpenSSL是一个开源的加密工具包&#xff0c;广泛用于安全套接层&#xff08;SSL&#xff…

了解C++工作机制

基于hello.cpp对C的运行进行一个初步认识&#xff0c;并介绍国外C大佬Cherno常用的项目结构和调试Tips C是如何工作的 C工作流程1.实用工程&#xff08;project&#xff09;结构&#xff08;1&#xff09;Microsoft Visual Studio2022新建项目后&#xff0c;自动生成的原始文件…

创建型设计模式 | 原型模式

一、原型模式 1、原理 原型模式&#xff0c;用原型实例指定创建对象的种类&#xff0c;并且通过拷贝这些原型创建新的对象。原型模式其实就是从一个对象再创建另外一个可定制的对象&#xff0c;而且不需要知道任何创建的细节。原型像是一个模板&#xff0c;可以基于它复制好多…

轻量封装WebGPU渲染系统示例<49>- 多种灯光多材质(源码)

实现方式: 1. 全局的灯光和阴影。 2. 球体和矩形平面使用了相同的材质对象。 3. 通过材质自动关联和组装对应的渲染材质功能节点。 4. 共享uniform或storage的buffer对象。 5. 共享shader module对象。 当前示例源码github地址: https://github.com/vilyLei/voxwebgpu/b…

Linux CentOS下Composer简单使用

1.下载composer-setup.php cd /usr/local/src php -r “copy(‘https://install.phpcomposer.com/installer’, ‘composer-setup.php’);”2.安装composer php composer-setup.php3.设置全局composer cp composer.phar /usr/local/bin/composer4.设置国内镜像 composer co…

排序嘉年华———选择排序和快排原始版

文章目录 一.选择排序二.霍尔版快速排序1.单趟思想2.递归多趟3.寻找中间值作为key 一.选择排序 在进行大佬“快排”之前先来一道开胃小菜————选择排序 选择排序是一种简单直观的排序算法&#xff0c;它的基本思想是每一次从待排序的数据元素中选出最小&#xff08;或最大&…

12 v-if指令

概述 v-if指令主要用来实现条件渲染&#xff0c;在实际项目中使用得也非常多。 v-if通常会配合v-else-if、v-else指令一起使用&#xff0c;可以达到多个条件执行一个&#xff0c;两个条件执行一个&#xff0c;满足一个条件执行等多种场景。 下面&#xff0c;我们分别演示这三…

AWS Linux安装桌面并远程访问

文章目录 小结问题及解决参考 小结 在AWS Linux安装了桌面并进行远程访问。 问题及解决 需要使用过程桌面访问AWS Linux&#xff0c;这里在AWS服务器安装并使用Amazon Linux 2 MATE desktop。 检查OS版本&#xff1a; [ec2-userip-10-0-3-241 ~]$ grep PRETTY_NAME /etc/o…

基于“Galera+MariaDB”搭建多主数据库集群的实例

1、什么是多主数据库集群 多主数据库集群是一种数据库集群架构&#xff0c;每个节点都可以接收写入操作和读取操作&#xff0c;并且通过心跳机制同步数据&#xff0c;保证数据一致性和高可用性。因多主数据库集群每个节点都可以承担读写操作&#xff0c;因此它可以充分利用各个…

1.【分布式】分布式事务详解

分布式事务 1.分布式事务是什么&#xff1f;数据库事务 2.分布式事务产生的原因&#xff1f;存储层拆分服务层拆分 3.分布式事务解决方案4.分布式事务有哪些开源组件SeateTCC 分布式服务组件基于消息补偿的最终一致性 5.两阶段提交&#xff0c;三阶段协议详解二阶段提交协议三阶…

Node.js使用Express框架写服务端接口时,如何将接口拆分到不同文件中

项目目录结构说明&#xff1a; node.js连接mysql数据库步骤可参考&#xff1a;Node.js 连接 MySQL | 菜鸟教程 1、拆分之前的写法&#xff0c;未区分模块&#xff0c;所有接口api都写在了入口文件app.js中&#xff1b; 需求&#xff1a;想要将接口api拆分成根据不同的业务模块…

Gin之GORM多表关联查询(多对多;自定义预加载SQL)

数据库三个,如下: 注意:配置中间表的时候,表设计层面最好和配置的其他两张表契合,例如其他两张表为fate内的master和slave;要整合其对应关系的话,设计中间表的结构为master_id和slave_id最好(不然会涉及重写外键的操作) 重写外键(介绍) 对于 many2many 关系,连接表…