vue基础——指令闪动v-cloak

最新推荐文章于 2024-07-04 10:12:44 发布

失忆症患者_

最新推荐文章于 2024-07-04 10:12:44 发布

阅读量1k

点赞数

文章标签： vue.js

本文链接：https://blog.csdn.net/qq_41929578/article/details/108908823

版权

指令闪动v-cloak

v-cloak指令用法

1.提供样式:

[v-cloak]{
			display:none;
				}

2.在插值表达式所在标签中添加v-cloak指令

作用：刷新不会闪动；
背后原理：先通过样式隐藏内容，然后在内存中进行值的替换，替换好之后显示最终的结果;

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<script src="vue.js"></script>
		<style type="text/css">
			[v-cloak]{
					display:none;
				}
		</style>
	</head>
	<body>
		<div id="app">
			{{message}}
			<div v-cloak>{{message+'-----'+123}}</div>
		</div>
		<script type="text/javascript">
				el: "#app",
				data :{
					message: "Hello Vue!"
				}
				
			})
		</script>
	</body>
</html>