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 相关文章推荐
JQuery的ajax获取数据后的处理总结(html,xml,json)
Jul 14 Javascript
jquery Mobile入门—外部链接切换示例代码
Jan 08 Javascript
js 立即调用的函数表达式如何写
Jan 12 Javascript
jquery解析XML字符串和XML文件的方法说明
Feb 21 Javascript
jquery实现页面百叶窗走马灯式翻滚显示效果的方法
Mar 12 Javascript
原生js模拟淘宝购物车项目实战
Nov 18 Javascript
jquery 无限极下拉菜单的简单实例(精简浓缩版)
May 31 Javascript
如何制作幻灯片(代码分享)
Jan 06 Javascript
BootstrapTable refresh 方法使用实例简单介绍
Feb 20 Javascript
微信小程序 支付后台java实现实例
May 09 Javascript
常见的浏览器存储方式(cookie、localStorage、sessionStorage)
May 07 Javascript
JavaScript 异步时序问题
Nov 20 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
Fatal error: Call to undefined function curl_init()解决方法
2010/04/09 PHP
php权重计算方法代码分享
2014/01/09 PHP
CI框架中site_url()和base_url()的区别
2015/01/07 PHP
详解PHP匿名函数与注意事项
2016/03/29 PHP
php中strlen和mb_strlen用法实例分析
2016/11/12 PHP
Laravel使用scout集成elasticsearch做全文搜索的实现方法
2018/11/30 PHP
用Javascript实现锚点(Anchor)间平滑跳转
2009/09/08 Javascript
JQuery入门——移除绑定事件unbind方法概述及应用
2013/02/05 Javascript
js控制当再次点击按钮时的间隔时间
2014/06/03 Javascript
微信分享的标题、缩略图、连接及描述设置方法
2014/10/14 Javascript
不依赖Flash和任何JS库实现文本复制与剪切附源码下载
2015/10/09 Javascript
jQuery 3 中的新增功能汇总介绍
2016/06/12 Javascript
js 弹出虚拟键盘修改密码的简单实例
2016/10/10 Javascript
jQuery发请求传输中文参数乱码问题的解决方案
2018/05/22 jQuery
在angularJs中进行数据遍历的2种方法
2018/10/08 Javascript
JS实现的贪吃蛇游戏完整实例
2019/01/18 Javascript
详解babel升级到7.X采坑总结
2019/05/12 Javascript
[01:14:35]DOTA2上海特级锦标赛B组资格赛#1 Alliance VS Fnatic第一局
2016/02/26 DOTA
[00:12]DAC SOLO赛卫冕冠军 VG.Paparazi灬展现SOLO技巧
2018/04/06 DOTA
深入理解Python中变量赋值的问题
2017/01/12 Python
Python处理菜单消息操作示例【基于win32ui模块】
2018/05/09 Python
简单了解python反射机制的一些知识
2019/07/13 Python
ipad上运行python的方法步骤
2019/10/12 Python
python实现局域网内实时通信代码
2019/12/22 Python
python离线安装外部依赖包的实现
2020/02/13 Python
python GUI库图形界面开发之PyQt5输入对话框QInputDialog详细使用方法与实例
2020/02/27 Python
详解使用Python写一个向数据库填充数据的小工具(推荐)
2020/09/11 Python
css3中的calc函数浅析
2018/07/10 HTML / CSS
天猫超市:阿里巴巴打造的网上超市
2016/11/02 全球购物
客服实习的个人自我鉴定
2013/10/20 职场文书
高级销售员求职信
2013/10/25 职场文书
商场活动策划方案
2014/01/24 职场文书
常务副县长“四风”个人对照检查材料思想汇报
2014/10/02 职场文书
学生上课说话检讨书
2014/10/25 职场文书
高温慰问简报
2015/07/21 职场文书
利用python进行数据加载
2021/06/20 Python