先来看一段代码:
<ul v-for="item in items">
<li>{{ item.name }}</li>
</ul>
当我们刷新页面的时候因为响应问题会看到 {{item.name}} 这个vue.js模板变量,这样给用户带来了不好的体验,那么要怎么解决这个问题呢?
答案就是加上一个:
v-cloak
代码如下:
<ul v-cloak v-for="item in items">
<li>{{ item.name }}</li>
</ul>
然后在css中添加
[v-cloak] {
display: none;
}
搞定!
但是原理是什么呢?
这段 CSS 的含义是,包含 v-cloak (cloak n. 披风,斗篷;vt. 遮盖,掩盖) 属性的 html 标签在页面初始化时会被隐藏。
在 vuejs instance ready 之后,v-cloak 属性会被自动去除,也就是对应的标签会变为可见。