07. 防止页面闪烁

于2022-10-10 18:54:15发布

vue会把{{ xxx }} 编译成我们指定的数据，但是在编译的那一刹那间， {{ xxx }} 还是会显示出来的。如下图：

解决方法是使用v-cloak

<!doctype html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
</head>
<style>
[v-cloak]{display: none;}
</style>
<body>
	<div id='app' v-cloak>
		{{msg}}
	</div>
	<script type="text/javascript" src="vue.min.js"></script>
	<script type="text/javascript">
		new Vue({
			el : '#app',
			data : {
				msg : 'hello'
			}
		})
	</script>
</body>
</html>