位置:电子教程 > Vue.JS入门教程 推荐学习资源
Vue.js入门
Vue.js 数据绑定
Vue.js中的指令
Vue.js 表单和双向数据绑定
Vue.js 条件和循环指令
Vue.js 循环语句v-for
Vue.js 样式绑定
Vue.js 事件处理器
Vue.js 监听属性
Vue.js 计算属性
Vue.js 组件 Component
Vue.js 自定义指令
Vue.js 路由
Vue.js 过渡和动画
Vue.js 响应接口
Vue.js中Ajax(Axios)
当前阅读教程: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>

当我们使用webpackvue-router时,项目中只有一个空的div元素,剩余的内容都是由路由去挂载不同组件完成的,所以不需要v-cloak


上一篇: 数据绑定 v-once指令 下一篇: 属性绑定 v-bind 指令
QQ交流群:147415688             广告联系QQ:45157718(微信同号)