vue基礎——指令閃動v-cloak

失憶症患者1發表於2020-10-03
Vue

指令閃動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>

相關文章