vue 中v-cloak指令
v-cloak不需要表达式,它会在vue实例结束编译时从绑定的html元素上移除,经常和display:none;配合使用:<div id="app" v-cloak><div :style="{'color':color,'fontSize':fontSize+'px'}">文本</div>{{message}}</div>new ...
·
v-cloak不需要表达式,它会在vue实例结束编译时从绑定的html元素上移除,经常和display:none;配合使用:
<div id="app" v-cloak>
<div :style="{'color':color,'fontSize':fontSize+'px'}">文本</div>
{{message}}
</div>
new Vue({
el:'#app',
data:{
color:'red',
fontSize:'14',
message:'文本'
},
})
注意:
这时虽然已经加了指令 v-cloal,但是实际这时没有起到任何作用,当网速较慢,Vue.js 文件还没有加载完时,在页面会显示{{message}}的字样,直到Vue创建实例、编译模版时,DOM才会被替换,所以这个过程屏幕是有闪动的,需要配合CSS可以解决这个问题。
<style type="text/css">
[v-cloak] {
display: none
}
</style>
当我们使用webpack和vue-router时,项目中只有一个空的div元素,剩余的内容都是由路由去挂载不同组件完成的,所以不需要v-cloak。
更多推荐
已为社区贡献27条内容
所有评论(0)