v-cloak的认识和使用
屏蔽闪动,经常用到v-cloak,Vue解析后,会自动删除v-cloak属性
示例
<style type="text/css">
[v-cloak]{
display: none;
}
</style>
</head>
<body>
<div id="app" v-cloak>
<h1>{{message}}</h1>
</div>
<script src="vue.js"></script>
<script>
setTimeout(function(){ //延迟解析Vue
const apt = new Vue({
el : '#app',
data :{
message : '你好,世界',
}
})
},1000)
</script>
显示结果
备注:如果没有v-cloak屏蔽闪动,会显示{{message}}延迟显示渲染