v-cloak指令的用法
v-cloak不需要表达式,在vue实例编译结束的时候,从绑定的HTML元素中移除,通常是和CSS的display:none结合使用。语法:<div id="app" v-cloak>{{message}}</div><script>var app = new Vue({el: "#app...
·
v-cloak不需要表达式,在vue实例编译结束的时候,从绑定的HTML元素中移除,通常是和CSS的display:none结合使用。
语法:
<div id="app" v-cloak>{{message}}</div>
<script>
var app = new Vue({
el: "#app",
data: {
message: "this is a book"
}
})
</script>
添加了v-cloak并没有起到作用,在加载很慢的时候,vue.js文件没有加载完成时,在页面上上会出现 ‘{{message}}’的字样,等到vue创建实例、编译模板时,DOM就会被替换掉,过程中屏幕上会出现闪动一下。这时在CSS中添加display:none就可以避免该问题:
[v-cloak]{
display:none;
}
v-cloak指令可以解决初始化慢而导致页面闪动的一个方案,如果是在有工程化的项目里面,项目的HTML结构中就只有一个空的DIV元素,其他的都是让路由去挂载不同组件来完成的,就不需要v-cloak指令的了。
更多推荐
已为社区贡献1条内容
所有评论(0)