Vue内置指令：v-html、v-cloak

最新推荐文章于 2024-07-11 14:17:30 发布

拾一·

最新推荐文章于 2024-07-11 14:17:30 发布

阅读量479

点赞数

分类专栏： Vue 文章标签： vue.js v-html v-cloak 页面闪烁问题

本文链接：https://blog.csdn.net/m0_59850169/article/details/119965505

版权

Vue 专栏收录该内容

5 篇文章 0 订阅

订阅专栏

v-html的作用？

向指定节点中渲染包含html结构的内容。

v-html与插值语法的区别？

(1) v-html会替换掉节点中所有的内容，{{xx}}则不会。

(2) v-html可以识别html结构。

v-html的使用容易导致安全问题，慎用

(1)在网站上动态渲染任意HTML是非常危险的，容易导致XSS攻击。

(2)一定要在可信的内容上使用v-html，永远不要用在用户提交的内容上！

v-cloak的作用？

v-cloak本质是一个特殊属性，Vue实例创建完并接管容器后，v-cloak属性就会被删除。

使用css配合v-cloak使用，可以解决网速慢时页面展示出插值表达式{{xxx}}的问题，即

防止页面加载时出现闪烁问题（解决插值表达式的闪烁问题）；

为什么会有闪烁问题？

代码加载的时，会先加载HTML，把插值语法当做HTML内容加载到页面上；当加载完js文件后才把插值语法替换掉，所以网速慢时会出现闪烁的问题。

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8" />
		<title>v-cloak</title>
        <script src="http://localhost:8080/resource/5s/vue.js"></script>
		<style>
			[v-cloak]{
				display:none;
			}
		</style>
	</head>
	<body>
		<div id="root">
			<h2 v-cloak>{{name}}</h2>
		</div>
	</body>
	
	<script type="text/javascript">
		new Vue({
			el:'#root',
			data:{
				name:'丽丽'
			}
		})
	</script>
</html>

拾一·

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
Vue内置指令：v-html、v-cloak

v-html的作用？向指定节点中渲染包含html结构的内容。 v-html与插值语法的区别？(1) v-html会替换掉节点中所有的内容，{{xx}}则不会。(2) v-html可以识别html结构。v-html的使用容易导致安全问题，慎用(1)在网站上动态渲染任意HTML是非常危险的，容易导致XSS攻击。(2)一定要在可信的内容上使用v-html，永远不要用在用户提交的内容上！v-cloak的作用？v-cloak本质是一个特殊属性，Vue实例创...
复制链接

扫一扫

专栏目录