vue中v-cloak解决刷新或者加载出现闪烁问题(显示变量)


Posted in Javascript onApril 20, 2018

在使用vue绑定数据的时候,渲染页面时会出现变量闪烁,例如

<div class="#app">
  <p>{{value.name}}</p>
</div>

在加载的时候会看到

{{value.name}}

在页面出现,过了几秒之后才会渲染数据,在vue中有个指令可以解决这个问题,v-cloak

那么,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文件里或者内联样式中

补充:

下面看下Vue 中的 v-cloak 解读

v-cloak 的作用和用法

用法:

这个指令保持在元素上直到关联实例结束编译。和 CSS 规则如 [v-cloak] { display: none } 一起用时,这个指令可以隐藏未编译的 Mustache 标签直到实例准备完毕。官方API

<div id="app">
  {{msg}}
</div>

HTML 绑定 Vue实例,在页面加载时会闪烁

然后才会出现 加载完成 字样,为了效果更明显,我们可以延后加载 Vue 实例

setTimeout(() => {
  new Vue({
    el: '#app',
    data: {
      msg: 'hello'
    }
  })
},2000)

v-cloak 可以解决这一问题,在 css 中加上

[v-cloak] {
 display: none;
}

在 html 中的加载点加上 v-cloak,就可以解决这一问题

<div id="app" v-cloak>
  {{msg}}
</div>

 Vue1.x 与 Vue2 中 v-cloak 的不同

Vue1 中,允许将 Vue 实例挂载在 body 上,而 Vue2 是不允许的,想对整个页面实例化,需要另外用一个 div 来容纳整个页面内容,对其进行实例化

这样在使用 v-cloak 时,同样需要用到这种方法

 为什么我用的 v-cloak 无效?

在实际项目中,我们常通过 @import 来加载 css 文件

@import "style.css"
@import "index.css"

而 @import 是在页面 DOM 完全载入后才会进行加载,如果我们将 [v-cloak] 写在 @import 加载的 css 文件中,就会导致页面仍旧闪烁。

为了避免这种情况,我们可以将 [v-cloak] 写在 link 引入的 css 中,或者写一个内联 css 样式,这样就得到了解决。

总结

以上所述是小编给大家介绍的vue中v-cloak解决刷新或者加载出现闪烁问题(显示变量) ,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!

Javascript 相关文章推荐
IE 下的只读 innerHTML
Aug 21 Javascript
jQuery ul标签下拉菜单演示代码
Dec 11 Javascript
JS实现随机化快速排序的实例代码
Aug 01 Javascript
jquery的相对父元素和相对文档定位示例代码
Aug 02 Javascript
JavaScript中的对象序列化介绍
Dec 30 Javascript
JavaScript中的类与实例实现方法
Jan 23 Javascript
JS实现的Unicode编码转换操作示例
Apr 28 Javascript
浅谈Vue数据绑定的原理
Jan 08 Javascript
js实现轮播图的完整代码
Oct 26 Javascript
iview实现select tree树形下拉框的示例代码
Dec 21 Javascript
小程序识别身份证,银行卡,营业执照,驾照的实现
Nov 05 Javascript
javascript设计模式 ? 外观模式原理与用法实例分析
Apr 15 Javascript
jQuery中的$是什么意思及 $. 和 $().的区别
Apr 20 #jQuery
vue多页面开发和打包正确处理方法
Apr 20 #Javascript
用ES6的class模仿Vue写一个双向绑定的示例代码
Apr 20 #Javascript
Vue写一个简单的倒计时按钮功能
Apr 20 #Javascript
使用Vue如何写一个双向数据绑定(面试常见)
Apr 20 #Javascript
Vue中如何实现proxy代理
Apr 20 #Javascript
React diff算法的实现示例
Apr 20 #Javascript
You might like
mysql 搜索之简单应用
2007/04/27 PHP
php 空格,换行,跳格使用说明
2009/12/18 PHP
php通过asort()给关联数组按照值排序的方法
2015/03/18 PHP
弹出模态框modal的实现方法及实例
2017/09/19 PHP
php使用环形链表解决约瑟夫问题完整示例
2018/08/07 PHP
网上抓的一个特效
2007/05/11 Javascript
基于Jquery的标签智能验证实现代码
2010/12/27 Javascript
通过下拉框的值来确定输入框是否可以为空的代码
2011/10/18 Javascript
字符串的replace方法应用浅析
2011/12/06 Javascript
等待指定时间后自动跳转或关闭当前页面的js代码
2013/07/09 Javascript
js设置组合快捷键/tabindex功能的方法
2013/11/21 Javascript
在JavaScript中操作时间之setYear()方法的使用
2015/06/12 Javascript
JavaScript html5 canvas画布中删除一个块区域的方法
2016/01/26 Javascript
全面解析Bootstrap中nav、collapse的使用方法
2016/05/22 Javascript
JavaScript的for循环中嵌套一个点击事件的问题解决
2017/03/03 Javascript
微信小程序 商城开发(ecshop )简单实例
2017/04/07 Javascript
从零开始学习Node.js系列教程之基于connect和express框架的多页面实现数学运算示例
2017/04/13 Javascript
arcgis for js栅格图层叠加(Raster Layer)问题
2017/11/22 Javascript
用vue写一个仿简书的轮播图的示例代码
2018/03/13 Javascript
GOJS+VUE实现流程图效果
2018/12/01 Javascript
vue2.0 实现富文本编辑器功能
2019/05/26 Javascript
vue实现自定义多选按钮
2020/07/16 Javascript
python 从远程服务器下载东西的代码
2013/02/10 Python
python操作MySQL数据库具体方法
2013/10/28 Python
python实现将元祖转换成数组的方法
2015/05/04 Python
python实现自动网页截图并裁剪图片
2018/07/30 Python
python flask安装和命令详解
2019/04/02 Python
在交互式环境中执行Python程序过程详解
2019/07/12 Python
python将字母转化为数字实例方法
2019/10/04 Python
中东奢侈品购物网站:Ounass
2020/09/02 全球购物
土木工程专业个人求职信
2013/12/30 职场文书
工作决心书
2014/03/11 职场文书
新春寄语大全
2014/04/09 职场文书
大专生找工作自荐书
2014/06/10 职场文书
会议新闻稿
2015/07/17 职场文书
二年级作文之动物作文
2019/11/13 职场文书