当前阅读教程:Vue.JS入门教程 > 数据绑定 v-cloak指令 | |
阅读(22555525) 收藏 赞(5685) 分享 | |
上一篇: 数据绑定 v-once指令 | 下一篇: 属性绑定 v-bind 指令 |
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。 |
|
上一篇: 数据绑定 v-once指令 | 下一篇: 属性绑定 v-bind 指令 |