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 相关文章推荐
一个cssQuery对象 javascript脚本实现代码
Jul 21 Javascript
ext checkboxgroup 回填数据解决
Aug 21 Javascript
JQuery的一些小应用收集
Mar 27 Javascript
JS Map 和 List 的简单实现代码
Jul 08 Javascript
js获取元素相对窗口位置的实现代码
Sep 28 Javascript
jQuery中append()方法用法实例
Jan 08 Javascript
基于javascript实现的快速排序
Dec 02 Javascript
Angular2库初探
Mar 01 Javascript
js防刷新的倒计时代码 js倒计时代码
Sep 06 Javascript
基于JavaScript 实现拖放功能
Sep 12 Javascript
element-ui 文件上传修改文件名的方法示例
Nov 05 Javascript
vue 实现websocket发送消息并实时接收消息
Dec 09 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自定义函数call_user_func和call_user_func_array详解
2011/07/14 PHP
迪菲-赫尔曼密钥交换(Diffie?Hellman)算法原理和PHP实现版
2015/05/12 PHP
PNGHandler-借助JS让PNG图在IE下实现透明(包括背景图)
2007/08/31 Javascript
Javascript学习笔记7 原型链的原理
2010/01/11 Javascript
JavaScript 存在陷阱 删除某一区域所有节点
2010/05/10 Javascript
Javascript 设计模式(二) 闭包
2010/05/26 Javascript
JavaScript和ActionScript的交互实现代码
2010/08/01 Javascript
javascript之typeof、instanceof操作符使用探讨
2013/05/19 Javascript
多种方式实现JS调用后台方法进行数据交互
2013/08/20 Javascript
获取下拉列表框的值是数组,split,$.inArray示例
2013/11/13 Javascript
详解angularjs利用ui-route异步加载组件
2017/05/21 Javascript
JS奇技之利用scroll来监听resize详解
2017/06/15 Javascript
Vue引用第三方datepicker插件无法监听datepicker输入框的值的解决
2018/01/27 Javascript
Vue全局分页组件的实现代码
2018/08/10 Javascript
elementUI Tree 树形控件的官方使用文档
2019/04/25 Javascript
js实现盒子移动动画效果
2020/08/09 Javascript
vue npm install 安装某个指定的版本操作
2020/08/11 Javascript
Python+tkinter使用40行代码实现计算器功能
2018/01/30 Python
Python使用matplotlib绘制余弦的散点图示例
2018/03/14 Python
Python基于pyCUDA实现GPU加速并行计算功能入门教程
2018/06/19 Python
Python3.5基础之NumPy模块的使用图文与实例详解
2019/04/24 Python
Python pandas DataFrame操作的实现代码
2019/06/21 Python
你需要学会的8个Python列表技巧
2020/06/24 Python
python二维图制作的实例代码
2020/12/03 Python
Expedia马来西亚旅游网站:廉价酒店,度假村和航班预订
2016/07/26 全球购物
Crocs美国官方网站:卡骆驰洞洞鞋
2017/08/04 全球购物
CHARLES & KEITH加拿大官网:新加坡时尚品牌
2020/03/26 全球购物
销售人员自我评价怎么写
2013/09/19 职场文书
结婚喜宴家长答谢词
2014/01/15 职场文书
二年级数学教学反思
2014/01/21 职场文书
会走路的树教学反思
2014/02/20 职场文书
艺校音乐专业自我鉴定范文
2014/03/01 职场文书
幼儿园端午节活动方案
2014/08/25 职场文书
预备党员思想汇报1000字
2014/10/07 职场文书
学校纪律作风整改措施思想汇报
2014/10/11 职场文书
80后婚前协议书范本
2014/10/24 职场文书