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里写一个swing把数据插入数据库
Dec 10 Javascript
JavaScript设计模式之单例模式实例
Sep 24 Javascript
jQuery Validate插件实现表单强大的验证功能
Dec 18 Javascript
Bootstrap Scrollspy源码学习
Mar 02 Javascript
JS仿JQuery选择器功能
Mar 08 Javascript
BootStrap selectpicker后台动态绑定数据
Jun 01 Javascript
JS中的事件委托实例浅析
Mar 22 Javascript
详解Ubuntu安装angular-cli遇到的坑
Sep 08 Javascript
js实现类似iphone的网页滑屏解锁功能示例【附源码下载】
Jun 10 Javascript
详解Webpack抽离第三方类库以及common解决方案
Mar 30 Javascript
解决vue无法侦听数组及对象属性的变化问题
Jul 17 Javascript
在vue中使用回调函数,this调用无效的解决
Aug 11 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
如何使用PHP中的字符串函数
2006/11/24 PHP
一个php Mysql类 可以参考学习熟悉下
2009/06/21 PHP
php后门URL的防范
2013/11/12 PHP
php小技巧之过滤ascii控制字符
2014/05/14 PHP
php定义一个参数带有默认值的函数实例分析
2015/03/16 PHP
JS+XML 省份和城市之间的联动实现代码
2009/10/14 Javascript
JavaScript mapreduce工作原理简析
2012/11/25 Javascript
Json字符串转换为JS对象的高效方法实例
2013/05/01 Javascript
jQuery实现强制cookie过期方法汇总
2015/05/22 Javascript
javascript实现label标签跳出循环操作
2016/03/06 Javascript
js严格模式总结(分享)
2016/08/22 Javascript
基于BootStrap的Metronic框架实现页面链接收藏夹功能按钮移动收藏记录(使用Sortable进行拖动排序)
2016/08/29 Javascript
微信小程序 swiper组件轮播图详解及实例
2016/11/16 Javascript
vue+vux实现移动端文件上传样式
2017/07/28 Javascript
Node.js如何使用Diffie-Hellman密钥交换算法详解
2017/09/05 Javascript
浅谈在node.js进入文件目录的问题
2018/05/13 Javascript
详解小程序原生使用ES7 async/await语法
2018/08/06 Javascript
Angular ui-roter 和AngularJS 通过 ocLazyLoad 实现动态(懒)加载模块和依赖
2018/11/25 Javascript
使用vue2.6实现抖音【时间轮盘】屏保效果附源码
2019/04/24 Javascript
Layui 解决表格异步调用后台分页的问题
2019/10/26 Javascript
微信小程序点击item使之滚动到屏幕中间位置
2020/03/25 Javascript
javascript实现时钟动画
2020/12/03 Javascript
python paramiko模块学习分享
2017/08/23 Python
Python编程使用*解包和itertools.product()求笛卡尔积的方法
2017/12/18 Python
查看django版本的方法分享
2018/05/14 Python
Python 中字符串拼接的多种方法
2018/07/30 Python
python读取几个G的csv文件方法
2019/01/07 Python
基于PyQt4和PySide实现输入对话框效果
2019/02/27 Python
《永远的白衣战士》教学反思
2014/04/25 职场文书
爱心捐助倡议书
2014/05/19 职场文书
物理学专业自荐信
2014/06/11 职场文书
节能环保口号
2014/06/12 职场文书
公司委托书怎么写
2014/08/02 职场文书
2014年六五普法工作总结
2014/11/25 职场文书
红色革命电影观后感
2015/06/18 职场文书
深入理解Vue的数据响应式
2021/05/15 Vue.js