码迷,mamicode.com
首页 > Web开发 > 详细

使用 v-cloak 防止页面加载时出现 vuejs 的变量名

时间:2017-12-15 16:55:00      阅读:206      评论:0      收藏:0      [点我收藏+]

标签:none   加载   vuejs   页面   post   模板   解决   隐藏   刷新   

先来看一段代码:

<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 属性会被自动去除,也就是对应的标签会变为可见。

使用 v-cloak 防止页面加载时出现 vuejs 的变量名

标签:none   加载   vuejs   页面   post   模板   解决   隐藏   刷新   

原文地址:http://www.cnblogs.com/gmq-sh/p/8043802.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!