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 相关文章推荐
js树形控件脚本代码
Jul 24 Javascript
js href的用法
May 13 Javascript
jquery中交替点击事件的实现代码
Feb 14 Javascript
js 获取时间间隔实现代码
May 12 Javascript
jquery插件star-rating.js实现星级评分特效
Apr 15 Javascript
js创建jsonArray传输至后台及后台全面解析
Apr 11 Javascript
MVC+jQuery.Ajax异步实现增删改查和分页
Dec 22 Javascript
JavaScript中的操作符类型转换示例总结
May 30 Javascript
详解用webpack把我们的业务模块分开打包的方法
Jul 20 Javascript
微信小程序使用canvas的画图操作示例
Jan 18 Javascript
关于layui flow loading占位图的实现方法
Sep 21 Javascript
一文彻底理解js原生语法prototype,__proto__和constructor
Oct 24 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
PHP脚本的10个技巧(7)
2006/10/09 PHP
BBS(php &amp; mysql)完整版(四)
2006/10/09 PHP
php获取通过http协议post提交过来xml数据及解析xml
2012/12/16 PHP
PHP设置一边执行一边输出结果的代码
2013/09/30 PHP
PHP原生函数一定好吗?
2014/12/08 PHP
PHP图形操作之Jpgraph学习笔记
2015/12/25 PHP
twig模板获取全局变量的方法
2016/02/05 PHP
YII框架关联查询操作示例
2019/04/29 PHP
jQuery解析XML文件同时动态增加js文件的方法
2015/06/01 Javascript
js实现移动端微信页面禁止字体放大
2017/02/16 Javascript
js实现下一页页码效果
2017/03/07 Javascript
微信小程序表单验证错误提示效果
2017/05/19 Javascript
jQuery事件_动力节点Java学院整理
2017/07/05 jQuery
JavaScript判断输入是否为数字类型的方法总结
2017/09/28 Javascript
react实现点击选中的li高亮的示例代码
2018/05/24 Javascript
浅谈Vue数据响应思路之数组
2018/11/06 Javascript
微信小程序实现随机验证码功能
2018/12/20 Javascript
Nodejs对postgresql基本操作的封装方法
2019/02/20 NodeJs
Node4-5静态资源服务器实战以及优化压缩文件实例内容
2019/08/29 Javascript
[02:34]DOTA2英雄基础教程 幽鬼
2014/01/02 DOTA
python应用程序在windows下不出现cmd窗口的办法
2014/05/29 Python
Python3 伪装浏览器的方法示例
2017/11/23 Python
python方法生成txt标签文件的实例代码
2018/05/10 Python
python dataframe 输出结果整行显示的方法
2018/06/14 Python
Python不使用int()函数把字符串转换为数字的方法
2018/07/09 Python
python 通过 socket 发送文件的实例代码
2018/08/14 Python
Python对切片命名的实现方法
2018/10/16 Python
Python 3.8中实现functools.cached_property功能
2019/05/29 Python
Django高并发负载均衡实现原理详解
2020/04/04 Python
美国知名艺术画网站:Art.com
2017/02/09 全球购物
在C语言中实现抽象数据类型什么方法最好
2014/06/26 面试题
什么是JNDI的上下文?如何初始化JNDI上下文
2012/03/10 面试题
化学系大学生自荐信范文
2014/03/01 职场文书
单位工作证明范文
2014/09/14 职场文书
2016年毕业实习心得体会范文
2015/10/09 职场文书
CSS极坐标的实例代码
2021/06/03 HTML / CSS