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 相关文章推荐
JS/FLASH实现复制代码到剪贴板(兼容所有浏览器)
May 27 Javascript
JS获取url链接字符串 location.href
Dec 23 Javascript
判断日期是否能跨月查询的js代码
Jul 25 Javascript
详细分析JavaScript函数定义
Jul 16 Javascript
微信小程序 封装http请求实例详解
Jan 16 Javascript
AngularJs中 ng-repeat指令中实现含有自定义指令的动态html的方法
Jan 19 Javascript
使用electron将vue-cli项目打包成exe的方法
Sep 29 Javascript
JQuery实现ajax请求的示例和注意事项
Dec 10 jQuery
微信小程序实现九宫格抽奖
Apr 15 Javascript
微信小程序 弹窗输入组件的实现解析
Aug 12 Javascript
Vue可自定义tab组件用法实例
Oct 24 Javascript
js面向对象编程OOP及函数式编程FP区别
Jul 07 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
windows下开发并编译PHP扩展的方法
2011/03/18 PHP
php版淘宝网查询商品接口代码示例
2014/06/17 PHP
php常用hash加密函数
2014/11/22 PHP
php提示Warning:mysql_fetch_array() expects的解决方法
2014/12/16 PHP
四个常见html网页乱码问题及解决办法
2015/09/08 PHP
php传值方式和ajax的验证功能
2017/03/27 PHP
TFDN图片播放器 不错自动播放
2006/10/03 Javascript
javascript与CSS复习(三)
2010/06/29 Javascript
js的写法基础分析
2011/01/17 Javascript
JS保留小数点(四舍五入、四舍六入)实现思路及实例
2013/04/25 Javascript
基于Bootstrap重置输入框内容按钮插件
2016/05/12 Javascript
BootStrapTable服务器分页实例解析
2016/12/20 Javascript
Javascript中for循环语句的几种写法总结对比
2017/01/23 Javascript
封装一下vue中的axios示例代码详解
2020/02/16 Javascript
Vue状态模式实现窗口停靠功能(灵动、自由, 管理后台Admin界面)
2020/03/06 Javascript
[01:10]DOTA2次级职业联赛 - U5战队宣传片
2014/12/01 DOTA
Python中模块与包有相同名字的处理方法
2017/05/05 Python
python机器学习之神经网络(一)
2017/12/20 Python
python实现装饰器、描述符
2018/02/28 Python
django迁移数据库错误问题解决
2019/07/29 Python
浅谈pytorch grad_fn以及权重梯度不更新的问题
2019/08/20 Python
Python telnet登陆功能实现代码
2020/04/16 Python
jupyter notebook中美观显示矩阵实例
2020/04/17 Python
Python3中FuzzyWuzzy库实例用法
2020/11/18 Python
5 分钟读懂Python 中的 Hook 钩子函数
2020/12/09 Python
matplotlib对象拾取事件处理的实现
2021/01/14 Python
英国性能汽车零件和发动机配件在线:Maxpeedingrods
2019/11/05 全球购物
计算机应届毕业生自荐信范文
2014/02/23 职场文书
奥林匹克运动会口号
2014/06/19 职场文书
新农村建设标语
2014/06/24 职场文书
2015年度销售个人工作总结
2015/03/31 职场文书
行政介绍信范文
2015/05/04 职场文书
三好学生主要事迹材料
2015/11/03 职场文书
中学生打架《检讨书》范文
2019/08/12 职场文书
JavaScript获取URL参数的方法分享
2022/04/07 Javascript
Java版 单机五子棋
2022/05/04 Java/Android