详解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 相关文章推荐
js 跳出页面的frameset框架示例介绍
Dec 23 Javascript
Jquery实现仿腾讯微博发表广播
Nov 17 Javascript
js检测用户输入密码强度
Oct 22 Javascript
js计算文本框输入的字符数
Oct 23 Javascript
window.close(); 关闭浏览器窗口js代码的总结介绍
Jul 14 Javascript
Easyui的组合框的取值与赋值
Oct 28 Javascript
jQuery模拟实现的select点击选择效果【附demo源码下载】
Nov 09 Javascript
原生JS实现网页手机音乐播放器 歌词同步播放的示例
Feb 02 Javascript
微信小程序实现上传图片功能
May 28 Javascript
微信小程序 scroll-view 水平滚动实现过程解析
Oct 12 Javascript
在vue中使用echars实现上浮与下钻效果
Nov 08 Javascript
vue设置全局访问接口API地址操作
Aug 14 Javascript
将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正则走开
2008/03/15 PHP
php mysql_real_escape_string函数用法与实例教程
2013/09/30 PHP
php数据库备份还原类分享
2014/03/20 PHP
浅析PHP中call user func()函数及如何使用call user func调用自定义函数
2015/11/05 PHP
PHP中的使用curl发送请求(GET请求和POST请求)
2017/02/08 PHP
PHP程序员学习使用Swoole的理由
2018/06/24 PHP
JavaScript按位运算符的应用简析
2014/02/04 Javascript
JQuery判断radio(单选框)是否选中和获取选中值方法总结
2015/04/15 Javascript
JavaScript中style.left与offsetLeft的使用及区别详解
2016/06/08 Javascript
jQuery.Callbacks()回调函数队列用法详解
2016/06/14 Javascript
使用开源工具制作网页验证码的方法
2016/10/17 Javascript
详解HTTPS 的原理和 NodeJS 的实现
2017/07/04 NodeJs
element-ui 关于获取select 的label值方法
2018/08/24 Javascript
微信小程序tabBar 返回tabBar不刷新页面
2019/07/25 Javascript
如何管理Vue中的缓存页面
2021/02/06 Vue.js
在Django的上下文中设置变量的方法
2015/07/20 Python
win10下Python3.6安装、配置以及pip安装包教程
2017/10/01 Python
python顺序的读取文件夹下名称有序的文件方法
2018/07/11 Python
python 制作自定义包并安装到系统目录的方法
2018/10/27 Python
python字符串替换第一个字符串的方法
2019/06/26 Python
logging level级别介绍
2020/02/21 Python
解决Python中报错TypeError: must be str, not bytes问题
2020/04/07 Python
tensorflow模型转ncnn的操作方式
2020/05/25 Python
keras 实现轻量级网络ShuffleNet教程
2020/06/19 Python
python中函数返回多个结果的实例方法
2020/12/16 Python
新西兰优惠网站:Treat Me
2019/07/04 全球购物
车祸赔偿收入证明
2014/01/09 职场文书
国际贸易专业求职信
2014/06/04 职场文书
植树节口号
2014/06/21 职场文书
顶岗实习协议书
2015/01/29 职场文书
导游词300字
2015/02/13 职场文书
美术教师求职信范文
2015/03/20 职场文书
有关三国演义的读书笔记
2015/06/25 职场文书
领导干部学习十八届五中全会精神心得体会
2016/01/05 职场文书
员工保密协议范本,您一定得收藏!很有用!
2019/08/08 职场文书
python基础之类属性和实例属性
2021/10/24 Python