可以使用 v-cloak 指令设置样式, 这些样式会在 vue 实例编译结束时, 从绑定的 html 元素上被移除.
当网络较慢, 网页还在加载 vue.js , 而导致 Vue 来不及渲染, 这时页面就会显示出 Vue 源代码. 我们可以使用 v-cloak 指令来解决这一问题.
HTML:
- <div id="app">
- {{context}}
- </div>
JS:
- <script>
- var App = new Vue({
- el: '#app',
- data: {
- context:'互联网头部玩家钟爱的健身项目'
- }
- });
- </script>
效果:
我们使用 v-cloak 指令来解决屏幕闪动的问题吧 O(∩_∩)O~
JS 不变, 在 div 中加入 v-cloak 指令.
HTML:
- <div id="app" v-cloak>
- {{context}}
- </div>
CSS:
- [v-cloak]{
- display: none;
- }
使用 v-cloak 指令之后的效果(demo https://jsfiddle.net/deniro/joafmeph/ ):
在简单项目中, 使用 v-cloak 指令是解决屏幕闪动的好方法. 但在大型, 工程化的项目中 (webpack,vue-router) 只有一个空的 div 元素, 元素中的内容是通过路由挂载来实现的, 这时我们就不需要用到 v-cloak 指令咯.
来源: http://www.jianshu.com/p/f56cde007210