问题:
当网络较慢, 在使用 vue 绑定数据的时候, 渲染页面时会出现变量闪烁, 例如
- <div class="#app">
- <p>{{value.name}}</p>
- </div>
在加载的时候会看到这种变量情况, 过了零点几秒之后才会渲染数据
{{value.name}}
解决:
在 vue 中有个指令可以解决这个问题, v-cloak
那么, v-cloak 要放的位置并不需要添加到每个标签, 只要在 el 挂载的标签上添加就可以
- <div class="#app" v-cloak>
- <p>{{value.name}}</p>
- </div>
同时, 在 CSS 中需加上
- [v-cloak] {
- display: none;
- }
这样就可以解决页面显示变量情况了
注意:
但是有的时候会不起作用, 可能的原因有二:
1,v-cloak 的 display 属性被层级更高的给覆盖掉了, 所以要提高层级
- [v-cloak] {
- display: none !important;
- }
2, 样式放在了 @import 引入的 CSS 文件中
v-cloak 的这个样式放在 @import 引入的 CSS 文件中不起作用, 可以放在 link 引入的 CSS 文件里或者内联样式中
来源: http://www.jianshu.com/p/e5d7604629f9