用v-cloak解决特殊情况下页面加载遇到延迟时样式错乱的情况

用v-cloak解决特殊情况下页面加载遇到延迟时样式错乱的情况

首先我们设置一个定时器来模拟页面加载延迟的情况


模拟页面加载延迟效果图:


可以看到,页面没有完全加载出来时,数据是没有真正绑定上去的,所以它显示出了{{message}},而当页面加载完毕时数据才真正绑定要页面,才能正常渲染出我们想要的效果

如果我们想,当页面加载遇到延迟时为了防止数据显示的丑化,那我们就让它没有加载出来时先完全隐藏掉,等加载完毕再让它显示出来,这样就能防止用户看到一些丑化的数据了

解决方法:利用 v-cloak指令

v-clock指令的作用:当Vue在解析页面前,绑定有v-clock指令的元素会一直存在v-clock这个属性,而当Vue解析到这个元素后,v-clock这个属性会自动从元素中移除掉

知道了v-clock指令的作用后,我们可以通过与style样式的配合来做到未解析之前元素隐藏的效果

  1. 当页面解析到#app时,发现它身上有一个v-clock属性,而这个属性的样式会让#app隐藏起来
  2. 当定时器结束后,v-clock属性自动删除,那么隐藏的样式也没有了,此时数据也已经绑定到页面上了
发布了4 篇原创文章 · 获赞 0 · 访问量 24
展开阅读全文

没有更多推荐了,返回首页

©️2019 CSDN 皮肤主题: 游动-白 设计师: 上身试试

分享到微信朋友圈

×

扫一扫,手机浏览