插值--原始HTML

最新推荐文章于 2023-11-05 10:22:59 发布
最新推荐文章于 2023-11-05 10:22:59 发布
阅读量767 收藏
点赞数
分类专栏： Vue
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_43141611/article/details/108262322
版权 
<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title>插值--原始 HTML</title>
		<script src="js/vue.js" type="text/javascript" charset="utf-8"></script>
	</head>
	<body>
		<div id="app">
			<p>Using Mastaches: {{rawHtml}}</p>
			<p>Using v-html directive: <span v-html="rawHtml"></span></p>
		</div>
	</body>
</html>
<script type="text/javascript">
	new Vue({
		el: '#app',
	  data: {
		rawHtml: '<span style="color: red">This should be red.</span>'
	  }
	})
</script>

在这里插入图片描述

这样也可以：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title>插值--原始 HTML</title>
		<script src="js/vue.js" type="text/javascript" charset="utf-8"></script>
	</head>
	<body>
		<div id="app">
			<p>Using v-html directive: <span v-html="rawHtml"></span></p>
		</div>
	</body>
</html>
<script type="text/javascript">
	new Vue({
		el: '#app',
	  data: {
		rawHtml: '<span style="color: red">This should be red.</span>'
	  }
	})
</script>

在这里插入图片描述

你的站点上动态渲染的任意 HTML 可能会非常危险，因为它很容易导致 XSS 攻击。
请只对可信内容使用 HTML 插值，绝不要对用户提供的内容使用插值。
蓝白咖啡
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
vue 插值 v-once,v-text, v-html详解
08-28
"vue 插值 v-once,v-text, v-html 详解" Vue.js 中的插值是指在模板中将数据绑定到 HTML 元素的过程。插值可以分为三种类型：v-once、v-text 和 v-html，每种类型都有其特点和应用场景。 插值 插值是 Vue.js 中最...
如何用HTML语言图像插值,指令1——（插值表达式/v-cloak/v-text/v-html）
weixin_34794738的博客
06-04 749
一、mustache插值表达式即两个大括号({{}})，在标签元素内容中使用，传入变量，显示Vue对象data中的值。{{ msg }}var vm = new Vue({el:'#app',data:{msg:'123'}})浏览器显示二、v-cloak网速慢时，页面会闪现标签里插值表达式，例如{{ msg }}。使用v-cloak，还没渲染完时有这个属性的的样式设为隐藏，渲染完v-cloak标...
插值表达式 {{}}
最新发布
星辰迷上大海的博客
11-05 291
Vue插值表达式是一种Vue的模板语法，我们可以在模板中动态地用插值表达式渲染出Vue提供的数据绑定到视图中。插值表达式使用双大括号{{ }}将表达式包裹起来。
Vue中插值表达式,v-text和v-html三者区别
wriliant的博客
02-03 6100
概述 我们在学习vue的过程中，对指令的学习是必不可少的，下面结合自己工作和学习的一点经验介绍下vue中插值表达式，v-text和v-html三者的区别 插值表达式 我们知道页面的加载时自上而下的，js加载是同步的。当页面刷新比较频繁或者网上较慢的时候，我们使用插值表达式页面会先出现‘{{message}}’，再用真实数据替换‘{{message}}’(模拟这种现象可以将vue.js的引入放在bo...
03-插值表达式 {{ }}
m0_58250910的博客
08-09 385
不允许作为 title 属性的value。表达式: 是可以被求值的代码,JS引擎会将其计算出一个结果。
Vue——第一个Vue程序——2020.11.12
weixin_43402353的博客
11-12 509
一丶直接上源码，解释在注释，不懂评论留言，必回 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body> <div id="app">{{message}}</div> <script src="../js/vue.js">
web前端vue实现插值文本和输出原始html
08-28
Vue实现插值文本和输出原始HTML Vue.js 是一个流行的前端框架，用于构建用户界面。实现插值文本和输出原始HTML是 Vue.js 的一个重要特性。本文将详细介绍如何使用 Vue.js 实现插值文本和输出原始HTML。 插值文本 ...
GIS1-Exercise-9:GEOG 3150，GIS 1.第9号实验室练习。插值曲面-原始范围分析
04-13
GIS1-Exercise-9是针对GEOG 3150课程的一项实践任务，主要涉及的是插值曲面和原始范围分析。这个练习的核心目的是帮助学生理解和应用地理信息系统（GIS）技术来处理空间数据，特别是在环境科学、地理学以及规划等...
image-interpolation:python中的图像插值
05-25
图像插值要求Python3 OpenCV脾气暴躁的Matplotlib导入所需的库 import cv2import matplotlib.pyplot as pltimport numpy as npimport mathimport matplotlib.image as mpimg从驱动器加载图像并显示原始图像。...
js 双线性插值 双三次插值法 实现
yfm120750310的博客
12-10 466
js 双线性插值 双三次插值法 实现
Vue的数据渲染语法和指令(插值表达式、v-cloak、v-text、v-html)
01-08
在Vue里 有好几种数据渲染的方法及相关指令 下面将一一介绍： 一、插值表达式 插值表达式是用两个花括号{{}}包裹属性 属性在Vue实例里定义： 通过Vue提供的指令即可很方便地将数据渲染到页面上 无需手动操作DOM元素了 Document {{msg}} var vm=new Vue({ el:#app, data:{ msg:Hello Vue! } }) 由于插值表达式的语法是{{}} 因而也被称为mustache胡子
插值表达式与v-text、v-html详解
weixin_66664693的博客
05-10 992
插值表达式与v-text v-html
如何用HTML语言图像插值,web前端vue实现插值文本和输出原始html
weixin_33993891的博客
06-04 199
Vue.js 使用了基于 HTML 的模板语法，允许开发者声明式地将 DOM 绑定至底层 Vue 实例的数据。所有 Vue.js 的模板都是合法的 HTML ，所以能被遵循规范的浏览器和 HTML 解析器解析。在vue里最常见的数据绑定是使用“Mustache”语法 (双大括号) 的文本插值：Message: {{ value }} // 插值文本无论何时，绑定的数据对象上 value 属性发生了...
[Vue学习笔记] 插值 - HTML 标签
GYK0812的博客
01-31 313
使用 {{ 变量 }} 的方式在HTML 中添加值， 此时变量会以字符串的形式显示，那么如果我们想添加的变量对应的是一个 HTML 标签，应该如何操作呢？ <p id="app">Using mustaches: <span v-html="rawHtml"></span></p> <script type="text/javascript"> var vm = new Vue({ el: '#app'
Vue--HTML标签--插值语法失效
weixin_45406850的博客
11-03 5674
起因：前些天在做练习时被问到的 一般想到的结构 此时运行结果 问题：当使用同样的标签写时会出现插值语法失效 代码如下： 此时的效果： 但是后来我自己实验的时候还换了div标签进行测试，出现以下结果 所以上述的问题并不严谨，就开始了研究(可能当时比较无聊了) 在上网查了资料后发现，好像并没有人写过这样的问题(一般人应该也不会有这样的写代码习惯) 于是我又想到了应该是涉及到了HTML标签的问题，就换了一个方向，开始研究这两个标签的渲染问题 外层标签为h1时 页面渲染如下： 外层标签为div时 页面
在vue中举例说明html差值,vue模板语法-插值详解
weixin_42512249的博客
06-21 385
1.文本数据绑定最常见的形式就是使用‘Mustache'语法(双打括号)的文本插值：message:{{msg}}使用v-once指令，也能执行一次性的插值，当主句改变时，插值处的内容不会更新。但请留心这回影响到该节点上所有的数据绑定：this will nver change:{{message}}2.纯html双打括号会将数据解释为纯文本，而非html。为了输出html可以使用v-html指令...
Vue中插值表达式 v-text v-html区别
surprise_bao的博客
04-26 1157
Vue中插值表达式 v-text v-html区别 插值表达式 v-text v-html都有插值的作用，但三种有区别： v-text和插值表达式不能解析html，v-html可以 插值表达式有闪烁问题，v-text和v-html没有 插值表达式只会替换自己位置的这个占位符，v-text会替换元素中的原本内容 <div class="box"> <!-- v-cl...
插值表达式、v-text和v-html
weixin_44682587的博客
10-31 509
v-cloak、v-text和v-html v-cloak 1.v-cloak和插值表达式结合使用 2.用来解决插值表达式的闪烁的问题 3.不覆盖元素中原本的内容 4.不能读取HTML标签 v-text 1.没有闪烁问题（网速慢导致） 2.会覆盖元素中原本的内容 3.不能读取HTML标签 v-html 1.会覆盖元素中原本的内容 2.能够读取HTML标签 代码实例： <!DOCTYPE ht...
9 插值表达式 v-on:click、v-html、v-bind:title
wgchen
11-25 722
[基础]插值表达式和v-bind数据绑定场景插值表达式是什么？插值表达式输出html标签 v-html指令插值表达式只作一次渲染 v-once插值表达式中是可以使用JS表达式的v-bind指令的使用 场景 通过前两节内容终于学完了Vue3.x中的生命周期函数了，因为这套教程默认你是没有Vue2.x的基础的，所以就不讲解Vue2和Vue3生命周期的区别了，你只要记住Vue3的8个生命周期就可以了。 这节我们主要学习两个模板语法：插值表达式 和 v-bind 的使用。 插值表达式是什么？ 我以前在教程中经常说的
v-html中使用插值表达式
08-08
在Vue中，可以使用`v-html`指令将一个字符串作为原始的HTML插入到DOM元素中。插入的HTML将被视为不受限制的内容，因此需要谨慎使用。 除了直接传递一个字符串给`v-html`，还可以在插值表达式中使用`v-html`。插值表达式使用双大括号`{{}}`包裹，并且可以在其中执行简单的JavaScript表达式。 例如，假设有一个Vue实例`app`，其中有一个`message`属性，表达式`{{ message }}`将会动态地将`message`的值插入到`v-html`指令中。 HTML模板中的代码如下： ```html <div id="app"> <div v-html="formatMessage('{{ message }}')"></div> </div> ``` Vue实例的代码如下： ```javascript var app = new Vue({ el: '#app', data: { message: '<strong>Hello, Vue!</strong>' }, methods: { formatMessage: function(message) { return message.toUpperCase(); } } }); ``` 在上面的例子中，`formatMessage`方法将在插值表达式中被调用，而返回的结果将被作为HTML插入到`v-html`指令中。在这种情况下，最终渲染的结果是`<div><strong>HELLO, VUE!</strong></div>`。 需要注意的是，为了增强安全性，Vue默认不会编译并插入包含任何用户交互性质的HTML。如果您需要插入的HTML包含用户可交互的内容，确保自行过滤和验证输入，以防止XSS攻击。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值