文档章节

vue数据渲染出现闪烁问题及v-cloak没生效

Sharon啊
 Sharon啊
发布于 2017/07/03 15:39
字数 530
阅读 217
收藏 0

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

注意: 昨天又遇到一个坑,当我使用了v-cloak时发现他并没有生效,页面仍然出现了闪烁。通过多次调试检查才发现原来是我的[v-cloak]的dispaly属性被优先级别搞的样式覆盖导致,最后我给他加了 !important。 后来发现有两种情况会导致v-cloak没有生效。 1、v-cloak的display属性被层级更高的给覆盖了,解决方案如我之前一样。

[v-cloak]{
	display:none !important;
}

2、样式放在了@import引入的css文件中,解决方案:

  1. 放入由link引入的css文件里;
  2. 写在内联样式中。

本文转载自:http://blog.csdn.net/qq_37065891/article/details/73858617

Sharon啊

Sharon啊

粉丝 214
博文 3
码字总数 0
作品 0
深圳
前端工程师
私信 提问
vue常见指令之v-cloak、v-text、v-html、v-bind和v-on

v-cloak:解决闪烁问题 当网速较慢时,vue加载较慢,插值表达式渲染的数据就会产生闪烁,使用v-cloak指令加上如上样式可以解决该问题 v-text:插入文本字符串 v-text默认就没有闪烁,但是会以...

Mthinkway
03/19
0
0
vue页面加载闪烁问题的解决方法

v-if 和 v-show 的区别 v-if只会在满足条件时才会编译,而v-show不管是否满足条件始终会编译,v-show的显示与隐藏只是简单的切换CSS的display属性。 也就是说,在使用v-if时,若值为false,那...

Jack088
2018/12/12
0
0
说说 Vue.js 中的 v-cloak 指令

可以使用 v-cloak 指令设置样式,这些样式会在 Vue 实例编译结束时,从绑定的 HTML 元素上被移除。 当网络较慢,网页还在加载 Vue.js ,而导致 Vue 来不及渲染,这时页面就会显示出 Vue 源代...

deniro
2018/11/17
0
0
防止vuejs在解析时出现闪烁

---## 防止vuejs在解析时出现闪烁 ## 原因: 在使用vuejs、angularjs开发时,经常会遇见在如Chrome这类能够快速解析的浏览器上出现表达式({{ express }} ),或者是模块(div)的闪烁。对于这个问...

鼎六智能
2016/09/29
38
0
Vue.js 快速入门

什么是Vue.js vue是法语中视图的意思,Vue.js是一个轻巧、高性能、可组件化的MVVM库,同时拥有非常容易上手的API。作者是尤雨溪,写下这篇文章时vue.js版本为1.0.7 准备 我推荐使用sublime t...

鼎六智能
2016/09/30
1K
0

没有更多内容

加载失败,请刷新页面

加载更多

typescript 接口 函数类型 可索引类型

函数类型 可索引类型 数字索引签名 字符串索引签名 数字索引签名返回值 必须是 字符串索引签名返回值的子集 只读索引签名

lilugirl
今天
3
0
Oracle SQL语法实例合集

如需转载请注明出处https://my.oschina.net/feistel/blog/3052024 目的:迅速激活Oracle SQL 参考:《Oracle从入门到精通》 ------------------------------------------------------------......

LoSingSang
今天
2
0
增加 PostgreSQL 服务进程的最大打开文件数

https://serverfault.com/questions/628610/increasing-nproc-for-processes-launched-by-systemd-on-centos-7 要在systemd的配置里加才行...

helloclia
今天
2
0
组合模式在商品分类列表中的应用

在所有的树形结构中最适合的设计模式就是组合模式,我们看看常用商品分类中如何使用。 先定义一个树形结构的商品接口 public interface TreeProduct { List<TreeProduct> allProducts(...

算法之名
今天
3
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部