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 相关文章推荐
JavaScript高级程序设计(第3版)学习笔记6 初识js对象
Oct 11 Javascript
自定义ExtJS控件之下拉树和下拉表格附源码
Oct 15 Javascript
jquery实现简单易懂的图片展示小例子
Nov 21 Javascript
如何提高数据访问速度
Dec 26 Javascript
jQuery插件imgAreaSelect基础讲解
May 26 jQuery
基于JavaScript实现数码时钟效果
Mar 30 Javascript
Angular js 实现添加用户、修改密码、敏感字、下拉菜单的综合操作方法
Oct 24 Javascript
通过一次报错详细谈谈Point事件
May 17 Javascript
使用VUE+iView+.Net Core上传图片的方法示例
Jan 04 Javascript
编写更好的JavaScript条件式和匹配条件的技巧(小结)
Jun 27 Javascript
Node Express用法详解【安装、使用、路由、中间件、模板引擎等】
May 13 Javascript
vuex的使用和简易实现
Jan 07 Vue.js
开发用到的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
星际争霸 Starcraft 秘技补丁
2020/03/14 星际争霸
php 来访国内外IP判断代码并实现页面跳转
2009/12/18 PHP
php中json_encode中文编码问题分析
2011/09/13 PHP
php异常处理技术,顶级异常处理器
2012/06/13 PHP
php中addslashes函数与sql防注入
2014/11/17 PHP
朋友网关于QQ相关的PHP代码(研究QQ的绝佳资料)
2015/01/26 PHP
Zend Framework教程之Autoloading用法详解
2016/03/08 PHP
Laravel自定义 封装便捷返回Json数据格式的引用方法
2019/09/29 PHP
基于Jquery的动态创建DOM元素的代码
2010/12/28 Javascript
JS时间选择器 兼容IE6,7,8,9
2012/06/26 Javascript
javascript文件加载管理简单实现方法
2015/07/25 Javascript
Backbone.js框架中简单的View视图编写学习笔记
2016/02/14 Javascript
9个让JavaScript调试更简单的Console命令
2016/11/14 Javascript
NodeJS链接MySql数据库的操作方法
2017/06/27 NodeJs
详解微信小程序-canvas绘制文字实现自动换行
2019/04/26 Javascript
vue 弹窗时 监听手机返回键关闭弹窗功能(页面不跳转)
2019/05/10 Javascript
[01:14:34]DOTA2上海特级锦标赛C组资格赛#2 LGD VS Newbee第一局
2016/02/28 DOTA
Python编程中对文件和存储器的读写示例
2016/01/25 Python
Python 探针的实现原理
2016/04/23 Python
对python 合并 累加两个dict的实例详解
2019/01/21 Python
华为校园招聘上机笔试题 扑克牌大小(python)
2020/04/22 Python
python 命令行传入参数实现解析
2019/08/30 Python
解决pycharm debug时界面下方不出现step等按钮及变量值的问题
2020/06/09 Python
python3实现名片管理系统(控制台版)
2020/11/29 Python
CSS3悬停效果案例应用
2012/11/21 HTML / CSS
支持IE8的纯css3开发的响应式设计动画菜单教程
2014/11/05 HTML / CSS
一套C#面试题
2013/10/09 面试题
专题组织生活会方案
2014/06/15 职场文书
激励口号大全
2014/06/17 职场文书
2015年度党风廉政建设工作情况汇报
2015/01/02 职场文书
销售业务员岗位职责
2015/02/13 职场文书
清洁员岗位职责
2015/02/15 职场文书
2015年小学财务工作总结
2015/07/20 职场文书
MongoDB orm框架的注意事项及简单使用
2021/06/20 MongoDB
python调用ffmpeg命令行工具便捷操作视频示例实现过程
2021/11/01 Python
Android Flutter实现3D动画效果示例详解
2022/04/07 Java/Android