详解vue数据渲染出现闪烁问题


Posted in Javascript onJune 29, 2017

今天在使用vue进行数据渲染的时候发现当我不停的按F5刷新的时候出现了{{message}}的情况。经过多方查找我知道了要解决这个问题需要添加v-cloak指令,这时有一个问题困扰了我很久,我明明按照大家所说的加了v-for为什么还是没有用。后来折腾了很久才发现原因,先不说为什么,看看代码来:

在html中:

<ul v-for="item in person">
  <li v-cloak>{{item.name}}</li>
</ul>

在CSS中:

[v-cloak]:{diapsly:none;}

在script中:

var vm = new Vue({
  el:'#myapp',
  date:{
    person:[
      {name:'zhangsan'},
      {name:'lisi'},
      {name:'wangwu'}
    ]
  }
})

最开始是没有css样式,当我发现我不断的刷新的时候页面上会出现{{item.name}}一闪而逝,这时我在li上面添加了v-cloak指令,并添加了css样式。此时,我发现还是会有闪烁,我发现他根本没有执行css的样式。
现在大家应该都猜到原因了吧,因为我是在for循环里面添加的v-cloak。之前查的资料是直接使用。

css:

[v-cloak]:{display:none}

html:

<div v-cloak>{{message}}</div>

看到别人的写法以后我就以为是直接在要渲染的该标签添加指令,这也导致了我的v-cloak一直没有起到作用。最后,我把v-cloak添加到了v-for上,一切终于变得正常了。

<ul v-for="item in person" v-cloak>
  <li >{{item.name}}</li>
</ul>

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
javascript打开新窗口同时关闭旧窗口
Jan 16 Javascript
编写自己的jQuery插件简单实现代码
Apr 19 Javascript
网页源代码保护(禁止右键、复制、另存为、查看源文件)
May 23 Javascript
jquery插件validate验证的小例子
May 08 Javascript
js中的scroll和offset 使用比较的实例与分析
Sep 29 Javascript
js判断当前浏览器类型,判断IE浏览器方法
Jun 02 Javascript
jquery实现经典的淡入淡出选项卡效果代码
Sep 22 Javascript
jQuery实现磁力图片跟随效果完整示例
Sep 16 Javascript
简单实现Vue的observer和watcher
Dec 21 Javascript
利用node实现一个批量重命名文件的函数
Dec 21 Javascript
ES6数组与对象的解构赋值详解
Jun 14 Javascript
如何实现vue的tree组件
Dec 03 Vue.js
将angular.js项目整合到.net mvc中的方法详解
Jun 29 #Javascript
详解webpack和webpack-simple中如何引入css文件
Jun 28 #Javascript
基于jQuery实现的Ajax 验证用户名唯一性实例代码
Jun 28 #jQuery
VUE利用vuex模拟实现新闻点赞功能实例
Jun 28 #Javascript
Vuex利用state保存新闻数据实例
Jun 28 #Javascript
微信浏览器禁止页面下拉查看网址实例详解
Jun 28 #Javascript
基于EasyUI的基础之上实现树形功能菜单
Jun 28 #Javascript
You might like
PHP实现多进程并行操作的详解(可做守护进程)
2013/06/18 PHP
非常实用的PHP常用函数汇总
2014/12/17 PHP
php简单socket服务器客户端代码实例
2015/05/18 PHP
在Linux系统下一键重新安装WordPress的脚本示例
2015/06/30 PHP
PHP PDOStatement::fetchAll讲解
2019/01/31 PHP
js 目录列举函数
2008/11/06 Javascript
javascript 不间断的图片滚动并可点击
2010/01/15 Javascript
js实现幻灯片播放图片示例代码
2013/11/07 Javascript
parentElement,srcElement的使用小结
2014/01/13 Javascript
jQuery的context属性用法实例
2014/12/27 Javascript
php常见的页面跳转方法汇总
2015/04/15 Javascript
JavaScript中rem布局在react中的应用
2015/12/09 Javascript
原生nodejs使用websocket代码分享
2018/04/07 NodeJs
详解用Webpack与Babel配置ES6开发环境
2019/03/12 Javascript
快速解决Vue、element-ui的resetFields()方法重置表单无效的问题
2020/08/12 Javascript
[00:37]DOTA2上海特级锦标赛 Secert 战队宣传片
2016/03/03 DOTA
[53:03]Optic vs TNC 2018国际邀请赛小组赛BO2 第一场 8.17
2018/08/18 DOTA
Python break语句详解
2014/03/11 Python
TensorFlow中权重的随机初始化的方法
2018/02/11 Python
python os用法总结
2018/06/08 Python
Python之时间和日期使用小结
2019/02/14 Python
python实现五子棋人机对战游戏
2020/03/25 Python
PIL对上传到Django的图片进行处理并保存的实例
2019/08/07 Python
Python 迭代,for...in遍历,迭代原理与应用示例
2019/10/12 Python
基于打开pycharm有带图片md文件卡死问题的解决
2020/04/24 Python
DjangoWeb使用Datatable进行后端分页的实现
2020/05/18 Python
python3列表删除大量重复元素remove()方法的问题详解
2021/01/04 Python
利用html5的websocket实现websocket聊天室
2013/12/12 HTML / CSS
顶丰TOPPIK台湾官网:增发纤维假发,告别秃发困扰
2018/06/13 全球购物
买房委托公证书
2014/04/08 职场文书
应届大专毕业生自我鉴定
2014/04/08 职场文书
2014年小学教师工作自我评价
2014/09/22 职场文书
2014年宣传思想工作总结
2014/12/10 职场文书
2015年护士长个人工作总结
2015/04/24 职场文书
仅用几行Python代码就能复制她的U盘文件?
2021/06/26 Python
springboot如何接收application/x-www-form-urlencoded类型的请求
2021/11/02 Java/Android