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 函数参数限制说明
Nov 19 Javascript
基于jQuery的输入框无值自动显示指定数据的实现代码
Jan 24 Javascript
jquery获取tr并更改tr内容示例代码
Feb 13 Javascript
Jquery+Ajax+PHP+MySQL实现分类列表管理(下)
Oct 28 Javascript
javascript如何创建对象
Aug 29 Javascript
two.js之实现动画效果示例
Nov 06 Javascript
3种vue组件的书写形式
Nov 29 Javascript
详解刷新页面vuex数据不消失和不跳转页面的解决
Jan 30 Javascript
vue-cli安装使用流程步骤详解
Nov 08 Javascript
JS实现数组去重,显示重复元素及个数的方法示例
Jan 21 Javascript
Vue 解决多级动态面包屑导航的问题
Nov 04 Javascript
Vue-cli3多页面配置详解
Mar 22 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设计模式 Proxy (代理模式)
2011/06/26 PHP
php实现下载限制速度示例分享
2014/02/13 PHP
codeigniter自带数据库类使用方法说明
2014/03/25 PHP
PHP下载生成的csv文件及问题总结
2015/08/06 PHP
php+html5+ajax实现上传图片的方法
2016/05/14 PHP
php实现单笔转账到支付宝功能
2018/10/09 PHP
PHP安装扩展mcrypt以及相关依赖项深入讲解
2021/03/04 PHP
基于JavaScript 类的使用详解
2013/05/07 Javascript
setTimeout()递归调用不加引号出错的解决方法
2014/09/05 Javascript
基于javascript实现精确到毫秒的倒计时限时抢购
2016/04/17 Javascript
浅谈jQuery 选择器和dom操作
2016/06/07 Javascript
js实现碰撞检测特效代码分享
2016/10/16 Javascript
vue动态组件实现选项卡切换效果
2017/03/08 Javascript
基于node.js制作简单爬虫教程
2017/06/29 Javascript
element-ui 表格数据时间格式化的方法
2018/08/24 Javascript
浅谈redux, koa, express 中间件实现对比解析
2019/05/23 Javascript
vue滚动固定顶部及修改样式的实例代码
2019/05/30 Javascript
javascript中的相等操作符(==与===区别)
2019/12/21 Javascript
Vue页面刷新记住页面状态的实现
2019/12/27 Javascript
vue 路由meta 设置导航隐藏与显示功能的示例代码
2020/09/04 Javascript
详解JavaScript 的执行机制
2020/09/18 Javascript
JS实现简易日历效果
2021/01/25 Javascript
[01:05:52]DOTA2-DPC中国联赛 正赛 Ehome vs Aster BO3 第一场 2月2日
2021/03/11 DOTA
Python ORM框架SQLAlchemy学习笔记之关系映射实例
2014/06/10 Python
python通过正则查找微博@(at)用户的方法
2015/03/13 Python
Python的Django框架中的URL配置与松耦合
2015/07/15 Python
python用pandas数据加载、存储与文件格式的实例
2018/12/07 Python
Django封装交互接口代码
2020/07/12 Python
Python使用eval函数执行动态标表达式过程详解
2020/10/17 Python
python解决OpenCV在读取显示图片的时候闪退的问题
2021/02/23 Python
Html5游戏开发之乒乓Ping Pong游戏示例(一)
2013/01/21 HTML / CSS
德国亚马逊官方网站:Amazon.de
2020/11/15 全球购物
杭州SQL浙江浙大网新恩普软件有限公司
2013/07/27 面试题
白酒营销策划方案
2014/08/17 职场文书
公司年底活动方案
2014/08/17 职场文书
Python基础详解之描述符
2021/04/28 Python