VUE——v-cloak指令
属性选择器,可以控制vue实例化完成前的dom样式
功能:利用vue实例化后v-cloak属性会消失,设置其样式
官网介绍
没用前效果:当vue没渲染完前,界面效果会看到{{aboutCloak}}字符,影响用户体验
<body>
<div id="cloakApp">
<div >{{aboutCloak}}</div>
</div>
<script src="./vue.js"></script>
<script>
setTimeout(()=>{
new Vue({
el:'#cloakApp',
data:{
aboutCloak:'关于v-cloak的用法'
}
})
},2000)
</script>
</body>
v-cloak的用法:
/* 通过属性选择器获得标签来改变样式,只要有v-cloak的标签都用这样的效果 */
div[v-cloak] {
display: none;
}
<body>
<div id="cloakApp">
<div v-cloak>{{aboutCloak}}</div>
</div>
<script src="./vue.js"></script>
<script>
setTimeout(()=>{
new Vue({
el:'#cloakApp',
data:{
aboutCloak:'关于v-cloak的用法'
}
})
},2000)
</script>
</body>