vue使用v-if v-show页面闪烁,div闪现的解决方法


Posted in Javascript onOctober 12, 2018

在页面层次结构,数据较多的时候,用v-if或者v-show就会出现div闪现,或者部分闪烁的结果。

可以在根元素添加v-cloak来解决,并且设置它的样式即可。

代码只是示例,还需要自己修改测试。

<!DOCTYPE html>
<html lang="en">
<head> 
<meta charset="UTF-8"> 
<title>Document</title> 
<style> /* 在引入的css文件中写入这个*/ 
[v-cloak]
{  
display: none; 
} 
</style>
</head>
<body> 
<!-- 添加这个v-cloak --> 
<div id='app' v-cloak> 
<div v-if="isShow"> 
content 
</div> 
</div>
</body>
</html>
<script> 
new Vue(
{ 
el: '#app', 
data () 
{  
return {  
isShow: false  
} 
} 
})
</script>

下面看下vue中v-if和v-show的区别

相同点

两者都是在判断DOM节点是否要显示。

不同点

1、实现方式

v-if是根据后面数据的真假值判断直接从Dom树上删除或重建元素节点

v-show只是在修改元素的css样式,也就是display的属性值,元素始终在Dom树上。123

2、编译过程

v-if切换有一个局部编译/卸载的过程,切换过程中合适地销毁和重建内部的事件监听和子组件;

v-show只是简单的基于css切换;123

3、编译条件

v-if是惰性的,如果初始条件为假,则什么也不做;只有在条件第一次变为真时才开始局部编译;

v-show是在任何条件下(首次条件是否为真)都被编译,然后被缓存,而且DOM元素始终被保留; 123

4、性能消耗

v-if有更高的切换消耗,不适合做频繁的切换;

v-show有更高的初始渲染消耗,适合做频繁的额切换;

总结

以上所述是小编给大家介绍的vue使用v-if v-show页面闪烁,div闪现的解决方法,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!

Javascript 相关文章推荐
表单内同名元素的控制
Nov 22 Javascript
js DOM模型操作
Dec 28 Javascript
js改变img标签的src属性在IE下没反应的解决方法
Jul 23 Javascript
jquery实现邮箱自动填充提示功能
Nov 17 Javascript
jquery之别踩白块游戏的简单实现
Jul 25 Javascript
微信小程序实战之自定义模态弹窗(8)
Apr 18 Javascript
js每隔两秒输出数组中的一项(实例)
May 28 Javascript
jQuery、layer实现弹出层的打开、关闭功能
Jun 28 jQuery
vue.js路由跳转详解
Aug 28 Javascript
JS实现图片上传多次上传同一张不生效的处理方法
Aug 06 Javascript
实现Vue的markdown文档可以在线运行的方法示例
Dec 11 Javascript
js实现打字小游戏
Dec 17 Javascript
开发用到的js封装方法(20种)
Oct 12 #Javascript
Vue中 v-if/v-show/插值表达式导致闪现的原因及解决办法
Oct 12 #Javascript
微信{"errcode":48001,"errmsg":"api unauthorized, hints: [ req_id: 1QoCla0699ns81 ]"}
Oct 12 #Javascript
JS编写兼容IE6,7,8浏览器无缝自动轮播
Oct 12 #Javascript
Vue cli3 库模式搭建组件库并发布到 npm的流程
Oct 12 #Javascript
详解vue服务端渲染浏览器端缓存(keep-alive)
Oct 12 #Javascript
webpack4与babel配合使es6代码可运行于低版本浏览器的方法
Oct 12 #Javascript
You might like
如何修改和添加Apache的默认站点目录
2013/07/05 PHP
查找php配置文件php.ini所在路径的二种方法
2014/05/26 PHP
浅析php工厂模式
2014/11/25 PHP
ThinkPHP5 验证器的具体使用
2018/05/31 PHP
共享自己写一个框架DreamScript
2007/01/20 Javascript
javascript Prototype 对象扩展
2009/05/15 Javascript
javascript GUID生成器实现代码
2009/10/31 Javascript
基于jquery的文本框与autocomplete结合使用(asp.net+json)
2012/05/30 Javascript
用jQuery实现一些导航条切换,显示隐藏的实例代码
2013/06/08 Javascript
jquery实现先淡出再折叠收起的动画效果
2015/08/07 Javascript
js实现图片放大和拖拽特效代码分享
2015/09/05 Javascript
jQuery插件formValidator实现表单验证
2016/05/23 Javascript
微信小程序 特效菜单抽屉效果实例代码
2017/01/11 Javascript
使用vue-cli打包过程中的步骤以及问题的解决
2018/05/08 Javascript
ES6中let 和 const 的新特性
2018/09/03 Javascript
react 兄弟组件如何调用对方的方法示例
2018/10/23 Javascript
vue.draggable实现表格拖拽排序效果
2018/12/01 Javascript
微信小程序获取用户绑定手机号方法示例
2019/07/21 Javascript
vue+element实现图片上传及裁剪功能
2020/06/29 Javascript
[01:17:47]TNC vs VGJ.S 2018国际邀请赛小组赛BO2 第一场 8.18
2018/08/19 DOTA
pandas apply 函数 实现多进程的示例讲解
2018/04/20 Python
Python中的Socket 与 ScoketServer 通信及遇到问题解决方法
2019/04/01 Python
python获取磁盘号下盘符步骤详解
2019/06/19 Python
浅谈PyTorch的可重复性问题(如何使实验结果可复现)
2020/02/20 Python
Python+Kepler.gl轻松制作酷炫路径动画的实现示例
2020/06/02 Python
PyCharm 2020.2 安装详细教程
2020/09/25 Python
python生成xml时规定dtd实例方法
2020/09/21 Python
Python tempfile模块生成临时文件和临时目录
2020/09/30 Python
python自动化测试三部曲之unittest框架的实现
2020/10/07 Python
招股说明书范本
2014/05/06 职场文书
社保转移委托书范本
2014/10/08 职场文书
授权收款委托书范本
2014/10/10 职场文书
2014年学生工作总结
2014/11/20 职场文书
2015学校年度工作总结
2015/05/11 职场文书
go语言map与string的相互转换的实现
2021/04/07 Golang
python分分钟绘制精美地图海报
2022/02/15 Python