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 相关文章推荐
Javascript 函数中的参数使用分析
Mar 27 Javascript
JSP跨iframe如何传递参数实现代码
Sep 21 Javascript
js用正则表达式来验证表单(比较齐全的资源)
Nov 17 Javascript
Bootstrap每天必学之附加导航(Affix)插件
Apr 25 Javascript
jquery实用技巧之输入框提示语句
Jul 28 Javascript
如何判断出一个js对象是否一个dom对象
Nov 24 Javascript
JS控件bootstrap suggest plugin使用方法详解
Mar 25 Javascript
vue-cli中打包图片路径错误的解决方法
Oct 26 Javascript
如何编写一个完整的Angular4 FormText 组件
Nov 18 Javascript
javascript json对象小技巧之键名作为变量用法分析
Nov 11 Javascript
浅谈vue的第一个commit分析
Jun 08 Javascript
React中使用Vditor自定义图片详解
Dec 25 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 smarty模版引擎中的缓存应用
2009/12/02 PHP
解析php时间戳与日期的转换
2013/06/06 PHP
php中{}大括号是什么意思
2013/12/01 PHP
thinkPHP实现签到功能的方法
2017/03/15 PHP
关于php支持的协议与封装协议总结(推荐)
2017/11/17 PHP
PDO::setAttribute讲解
2019/01/29 PHP
js模拟类继承小例子
2010/07/17 Javascript
js 程序执行与顺序实现详解
2013/05/13 Javascript
JS实现程序暂停与继续功能代码解读
2013/10/10 Javascript
Javascript 学习笔记之 对象篇(二) : 原型对象
2014/06/24 Javascript
JS实现窗口加载时模拟鼠标移动的方法
2015/06/03 Javascript
JQuery PHP图片在线裁剪实例
2020/07/27 Javascript
详解小程序input框失焦事件在提交事件前的处理
2019/05/05 Javascript
微信小程序基础教程之worker线程的使用方法
2019/07/15 Javascript
微信小程序tab切换可滑动切换导航栏跟随滚动实现代码
2019/09/04 Javascript
基于openlayers实现角度测量功能
2020/09/28 Javascript
python爬取淘宝商品详情页数据
2018/02/23 Python
python处理数据,存进hive表的方法
2018/07/04 Python
python3+opencv3识别图片中的物体并截取的方法
2018/12/05 Python
centos6.5安装python3.7.1之后无法使用pip的解决方案
2019/02/14 Python
mac系统下Redis安装和使用步骤详解
2019/07/09 Python
Keras官方中文文档:性能评估Metrices详解
2020/06/15 Python
如何利用python检测图片是否包含二维码
2020/10/15 Python
美国著名的品牌折扣店:Burlington
2017/06/08 全球购物
Linux如何压缩可执行文件
2013/10/21 面试题
招商业务员岗位职责
2013/12/16 职场文书
财务主管的岗位职责
2013/12/30 职场文书
村道德模范事迹材料
2014/08/28 职场文书
数学教师个人总结
2015/02/06 职场文书
2015年志愿者服务工作总结
2015/04/20 职场文书
办公室管理规章制度
2015/08/04 职场文书
MySQL 聚合函数排序
2021/07/16 MySQL
JPA 通过Specification如何实现复杂查询
2021/11/23 Java/Android
vue生命周期钩子函数以及触发时机
2022/04/26 Vue.js
oracle数据库去除重复数据
2022/05/20 Oracle
Android RecyclerView实现九宫格效果
2022/06/28 Java/Android