v-cloak
- 不需要表达式
- 用法:这个指令保持在元素上直到关联组件实例结束编译。和 CSS 规则如
[v-cloak]{display: none}
一起用时,这个指令可以隐藏未编译的 Mustache 标签直到组件实例准备完毕。
//CSS [v-cloak] { display: none; } //html <div v-cloak> {{ message }} </div>
<div>
不会显示,直到编译结束。
当网络较慢,网页还在加载 Vue.js ,而导致 Vue 来不及渲染,这时页面就会显示出 Vue 源代码。我们可以使用 v-cloak 指令来解决这一问题。
<div id="app"> {{context}} </div> js: <script> var app = new Vue({ el: '#app', data: { context:'互联网头部玩家钟爱的健身项目' } }); </script>