解决vue渲染时闪烁{{}}的问题
2017-12-21 11:00
369 查看
Vue页面加载时v-show设置的隐藏元素出现导致页面闪烁问题
在写APP社区页面的时候在一些地方用了v-show,在刷新页面的时候就发现即便在逻辑判断为false某些元素不该显示时也会露个脸,一闪而过,元素快小还好,如果是特别大的地方就看起来就很不爽,于是就上网搜了下看有没有解决方法,结果还真有。方法一: v-cloak
官方的解释就一句话:这个指令保持在元素上直到关联实例结束编译。光看这句话一头雾水,后面紧接着说了用法:
和 CSS 规则如 [v-cloak] { display: none } 一起用时,这个指令可以隐藏未编译的 Mustache 标签直到实例准备完毕。
也就是说v-cloak指令可以像CSS选择器一样绑定一套CSS样式然后这套CSS会一直生效到实例编译结束。
示例代码:
// <div> 不会显示,直到编译结束。 [v-cloak] { display: none; } <div v-cloak> {{ message }} </div>
方法二: v-text
vue中我们会将数据包在两个大括号中,然后放到HTML里,但是在vue内部,所有的双括号会被编译成textNode的一个v-text指令。而使用v-text的好处就是永远更好的性能,更重要的是可以避免FOUC (Flash of Uncompiled Content) ,也就是上面与遇到的问题。
示例代码:
<span v-text="msg"></span> <!-- same as --> <span>{{msg}}</span>
相关文章推荐
- vue渲染时闪烁{{}}的问题及解决方法
- 解决vue渲染时闪烁{{}}的问题
- 解决AngularJS渲染未完成闪烁问题
- 解决vue数组中对象属性变化页面不渲染问题
- 解决vue同一slot在组件中渲染多次的问题
- vue中v-cloak解决刷新或者加载出现闪烁问题(显示变量)
- vue数据渲染出现闪烁问题及v-cloak没生效
- 用v-html解决Vue.js渲染中html标签不被解析的问题
- vue.js加载页面出现闪烁问题的解决
- vue2.0 axios跨域并渲染的问题解决方法
- vue2.0 axios跨域并渲染问题解决
- vue页面加载闪烁问题的解决方法
- vue数据渲染出现闪烁问题及v-cloak没生效
- 解决vue-router嵌套路由(子路由)在history模式下刷新无法渲染页面的问题
- 解决vue.js 数据渲染成功仍报错的问题
- 解决Vue渲染与插件的加载顺序问题
- 详解vue数据渲染出现闪烁问题
- vue学习:解决vue变量未渲染前代码显示问题
- 解决Vue 通过下表修改数组,页面不渲染的问题
- 解决CSS3动画首次渲染或结束时会闪烁的问题