VUE网速慢时初始化页面闪动问题出现vue源码或者指令
当网速较慢、Vue.js 文件还没加载完时,在页面上会显示{{message}}的字样,遇到这种问题该怎么办呢?很简单官方给出了一个指令
v-cloak
,它配合display:none
css属性使用
v-cloak
原理
v-cloak
指令一般在Vue实例结束编译时从绑定的HTML元素上移除,所有根据这一特性经常会与css属性一起配合使用
具体用法
<div id="app" v-cloak>
{{message}}
</div>
<script>
var app = new Vue({
el:"#app",
data:{
message:"这是一段文本"
}
})
</script>
、、、css中、、、
[v-cloak]{
display:none;
}
大家一起加油!