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事件e参数的方法preventDefault()取消默认行为
Sep 26 Javascript
jquery sortable的拖动方法示例详解
Jan 16 Javascript
js离开或刷新页面检测(且兼容FF,IE,Chrome)
Mar 05 Javascript
兼容所有浏览器的js复制插件Zero使用介绍
Mar 19 Javascript
jQuery实现图片轮播效果代码
Sep 27 Javascript
浅谈js中用$(#ID)来作为选择器的问题(id重复的时候)
Feb 14 Javascript
Javascript仿京东放大镜的效果
Mar 01 Javascript
jQuery插件HighCharts绘制的2D堆柱状图效果示例【附demo源码下载】
Mar 14 Javascript
解析Vue2 dist 目录下各个文件的区别
Nov 22 Javascript
JavaScript复制变量三种方法实例详解
Jan 09 Javascript
浅析 Vue 3.0 的组装式 API(一)
Aug 31 Javascript
vue3不同环境下实现配置代理
May 25 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
重置版战役片段
2020/04/09 魔兽争霸
德生PL990的分析评价
2021/03/02 无线电
PHP 处理图片的类实现代码
2009/10/23 PHP
PHP使用GD库制作验证码的方法(点击验证码或看不清会刷新验证码)
2017/08/15 PHP
在 PHP 和 Laravel 中使用 Traits的方法
2019/11/13 PHP
TP5框架页面跳转样式操作示例
2020/04/05 PHP
nodejs实现的一个简单聊天室功能分享
2014/12/06 NodeJs
Jquery数字上下滚动动态切换插件
2015/08/08 Javascript
浅谈js对象属性 通过点(.) 和方括号([]) 的不同之处
2016/10/29 Javascript
jquery组件WebUploader文件上传用法详解
2020/10/23 Javascript
JQuery 动态生成Table表格实例代码
2016/12/02 Javascript
微信小程序 数组中的push与concat的区别
2017/01/05 Javascript
原生js实现节日时间倒计时功能
2017/01/18 Javascript
Nodejs实现多房间简易聊天室功能
2017/06/20 NodeJs
vue.js实现条件渲染的实例代码
2017/06/22 Javascript
基于vue 添加axios组件,解决post传参数为null的问题
2018/03/05 Javascript
浅谈在node.js进入文件目录的问题
2018/05/13 Javascript
vue点击当前路由高亮小案例
2019/09/26 Javascript
JavaScript中的null和undefined用法解析
2019/09/30 Javascript
详解vue修改elementUI的分页组件视图没更新问题
2020/11/13 Javascript
[04:30]显微镜下的DOTA2第五期——拉比克
2013/09/26 DOTA
全面了解python字符串和字典
2016/07/07 Python
Python打印“菱形”星号代码方法
2018/02/05 Python
用Python实现最速下降法求极值的方法
2019/07/10 Python
Python (Win)readline和tab补全的安装方法
2019/08/27 Python
python bluetooth蓝牙信息获取蓝牙设备类型的方法
2019/11/29 Python
tensorflow之并行读入数据详解
2020/02/05 Python
python 基于opencv实现图像增强
2020/12/23 Python
中国领先的专业演出票务网:永乐票务
2016/08/29 全球购物
美国在线家装零售商:Build.com
2016/09/02 全球购物
小学评语大全
2014/04/22 职场文书
质量标语大全
2014/06/12 职场文书
学生会个人总结范文
2015/02/15 职场文书
学生会副主席竞选稿
2015/11/19 职场文书
观看《信仰》心得体会
2016/01/15 职场文书
Python+Appium自动化测试的实战
2021/06/30 Python