详解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弹窗代码 可以指定弹出间隔
Jul 03 Javascript
JavaScript基本编码模式小结
May 23 Javascript
document.all的一个比较完整的总结及案例
Jan 31 Javascript
js和jquery如何获取图片真实的宽度和高度
Sep 28 Javascript
VS2008中使用JavaScript调用WebServices
Dec 18 Javascript
HTML5实现留言和回复页面样式
Jul 22 Javascript
使用Javascript监控前端相关数据的代码
Oct 27 Javascript
angular 未登录状态拦截路由跳转的方法
Oct 09 Javascript
vue.js实现左边导航切换右边内容
Oct 21 Javascript
Vue脚手架编写试卷页面功能
Mar 17 Javascript
解决vue项目input输入框双向绑定数据不实时生效问题
Aug 05 Javascript
js实现限定区域范围拖拉拽效果
Nov 20 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中CURL方法curl_setopt()函数的参数分享
2013/01/19 PHP
PHP CURL CURLOPT参数说明(curl_setopt)
2013/09/30 PHP
合并ThinkPHP配置文件以消除代码冗余的实现方法
2014/07/22 PHP
php使用cookie实现记住登录状态
2015/04/27 PHP
PDO::_construct讲解
2019/01/27 PHP
可以显示单图片,多图片ajax请求的ThickBox3.1类下载
2007/12/23 Javascript
form表单中去掉默认的enter键提交并绑定js方法实现代码
2013/04/01 Javascript
JavaScript的事件绑定(方便不支持js的时候)
2013/10/01 Javascript
JS中attr和prop属性的区别以及优先选择示例介绍
2014/06/30 Javascript
轻松创建nodejs服务器(10):处理POST请求
2014/12/18 NodeJs
JQuery实现鼠标移动图片显示描述层的方法
2015/06/25 Javascript
JS显示日历和天气的方法
2016/03/01 Javascript
ajax跨域调用webservice的实现代码
2016/05/09 Javascript
jQuery ajaxSubmit 实现ajax提交表单局部刷新
2016/07/04 Javascript
iOS和Android用同一个二维码实现跳转下载链接的方法
2016/09/28 Javascript
require.js+vue开发微信上传图片组件
2016/10/27 Javascript
使用JavaScript为一张图片设置备选路径的方法
2017/01/04 Javascript
Bootstrap媒体对象学习使用
2017/03/07 Javascript
详解为Bootstrap Modal添加拖拽的方法
2018/01/05 Javascript
微信小程序使用wxParse解析html的实现示例
2018/08/30 Javascript
vue实现微信分享链接添加动态参数的方法
2019/04/29 Javascript
vue中@change兼容问题详解
2019/10/25 Javascript
Vue学习之axios的使用方法实例分析
2020/01/06 Javascript
vue实现把接口单独存放在一个文件方式
2020/08/13 Javascript
vue中element 的upload组件发送请求给后端操作
2020/09/07 Javascript
[02:47]DOTA2英雄基础教程 野性怒吼兽王
2013/12/05 DOTA
python中反射用法实例
2015/03/27 Python
安装Python的web.py框架并从hello world开始编程
2015/04/25 Python
python脚本实现验证码识别
2018/06/07 Python
python中用Scrapy实现定时爬虫的实例讲解
2021/01/18 Python
玖熙女鞋美国官网:Nine West
2016/10/06 全球购物
英国高街电视:High Street TV
2018/05/22 全球购物
简单的JAVA编程面试题
2013/03/19 面试题
教师节寄语2015
2015/03/23 职场文书
python b站视频下载的五种版本
2021/05/27 Python
Redis读写分离搭建的完整步骤
2021/09/14 Redis