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 Keycode对照表
Oct 24 Javascript
jquery中防刷IP流量软件影响统计的一点对策
Jul 10 Javascript
jquery中animate动画积累的解决方法
Oct 05 Javascript
Javascript变量作用域详解
Dec 06 Javascript
jquery.gridrotator实现响应式图片展示画廊效果
Jun 23 Javascript
JavaScript检查子字符串是否在字符串中的方法
Feb 03 Javascript
关于JS中match() 和 exec() 返回值和属性的测试
Mar 21 Javascript
jQuery is not defined 错误原因与解决方法小结
Mar 19 Javascript
JS实现线性表的顺序表示方法示例【经典数据结构】
Apr 11 Javascript
vue.js使用v-model指令实现的数据双向绑定功能示例
May 22 Javascript
小程序实现投票进度条
Nov 20 Javascript
Vue 数据响应式相关总结
Jan 28 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
PHP var_dump遍历对象属性的函数与应用代码
2010/06/04 PHP
thinkphp使用phpmailer发送邮件的方法
2014/11/24 PHP
php实现递归与无限分类的方法
2015/02/16 PHP
一起来写段JS drag拖动代码
2010/12/09 Javascript
jQuery之按钮组件的深入解析
2013/06/19 Javascript
jquery的总体架构分析及实现示例详解
2014/11/08 Javascript
javascript中函数作为参数调用的方法
2015/02/09 Javascript
javascript实现全角半角检测的方法
2015/07/23 Javascript
jQuery each函数源码分析
2016/05/25 Javascript
Angular外部使用js调用Angular控制器中的函数方法或变量用法示例
2016/08/05 Javascript
Bootstrap基本样式学习笔记之表单(3)
2016/12/07 Javascript
微信小程序 二维码canvas绘制实例详解
2017/01/06 Javascript
用jQuery实现可输入多选下拉组合框实例代码
2017/01/18 Javascript
基于BootStrap的前端分页带省略号和上下页效果
2017/05/18 Javascript
js实现日期显示的一些操作(实例讲解)
2017/07/27 Javascript
基于 Bootstrap Datetimepicker 联动
2017/08/03 Javascript
Nodejs模块载入运行原理
2018/02/23 NodeJs
vue弹窗消息组件的使用方法
2020/09/24 Javascript
深入理解JavaScript 中的匿名函数((function() {})();)与变量的作用域
2018/08/28 Javascript
JS实现电商商品展示放大镜特效
2020/01/07 Javascript
Vue数字输入框组件使用方法详解
2020/02/10 Javascript
Python爬虫框架Scrapy实战之批量抓取招聘信息
2015/08/07 Python
Python面向对象类的继承实例详解
2018/06/27 Python
python实现停车管理系统
2018/11/30 Python
关于python多重赋值的小问题
2019/04/17 Python
python pandas利用fillna方法实现部分自动填充功能
2020/03/16 Python
分享一个python的aes加密代码
2020/12/22 Python
css3制作彩色边线3d立体按钮的示例(css3按钮)
2014/05/06 HTML / CSS
主键(Primary Key)约束和唯一性(UNIQUE)约束的区别
2013/05/29 面试题
linux面试题参考答案(8)
2015/08/11 面试题
初中生个人学习的自我评价
2013/12/04 职场文书
班组长安全职责
2014/01/05 职场文书
关于对大人不礼貌的检讨书
2014/09/29 职场文书
2015年度学校卫生工作总结
2015/05/12 职场文书
何玥事迹观后感
2015/06/16 职场文书
2016年清明节寄语
2015/12/04 职场文书