最近在用vue.js,因为它比angularjs要轻量,但是总是在页面初始化加载时出现大括号({}),后来查看了vue.js的文档找到了解决方案

css

[v-cloak] {
  display: none;
}
 
html
<div v-cloak>
  {{ message }}
</div>

但是问题并没有彻底解决。

发现,未渲染完,元素页面消失。虽然没有显示大括号了。但是页面严重的因内容短暂缺失而跳动。体验不是很好。进一步改善测试发现。display:none,改为

[v-cloak] {
  opacity: 0;
}
 
ok,发现元素存在一定的空间了,但是还是有点小问题。想完美的同学也可以进一步改善。比如设高等。这里不做进一步

参考文档

https://cn.vuejs.org/v2/api/#v-cloak

Logo

前往低代码交流专区

更多推荐