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 相关文章推荐
Ajax::prototype 源码解读
Jan 22 Javascript
Javascript 自定义类型方法小结
Mar 02 Javascript
js 数值项目的格式化函数代码
May 14 Javascript
javascript getElementsByTagName
Jan 31 Javascript
jQuery之日期选择器的深入解析
Jun 19 Javascript
加载远程图片时,经常因为缓存而得不到更新的解决方法(分享)
Jun 26 Javascript
jquery动态加载js/css文件方法(自写小函数)
Oct 11 Javascript
Javascript中实现trim()函数的两种方法
Feb 04 Javascript
基于JS如何实现类似QQ好友头像hover时显示资料卡的效果(推荐)
Jun 09 Javascript
Angular中封装fancyBox(图片预览)遇到问题小结
Sep 01 Javascript
vue做网页开场视频的实例代码
Oct 20 Javascript
Vue动态组件和异步组件原理详解
May 06 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代码
2010/02/16 PHP
php处理单文件、多文件上传代码分享
2016/08/24 PHP
laravel 修改.htaccess文件 重定向public的解决方法
2019/10/12 PHP
PHP设计模式(八)装饰器模式Decorator实例详解【结构型】
2020/05/02 PHP
Javascript 中的 &amp;&amp; 和 || 使用小结
2010/04/25 Javascript
基于jQuery的合并表格中相同文本的相邻单元格的代码
2011/04/06 Javascript
基于jquery实现的鼠标滑过按钮改变背景图片
2011/07/15 Javascript
解决js正则匹配换行问题实现代码
2012/12/10 Javascript
jquery.autocomplete修改实现键盘上下键自动填充示例
2013/11/19 Javascript
javascript监听鼠标滚轮事件浅析
2014/06/05 Javascript
Javascript学习笔记之 函数篇(三) : 闭包和引用
2014/11/23 Javascript
JS截取字符串实例详解
2015/11/24 Javascript
Bootstrap字体图标无法正常显示的解决方法
2016/10/08 Javascript
nodejs 搭建简易服务器的图文教程(推荐)
2017/07/18 NodeJs
360提示[高危]使用存在漏洞的JQuery版本的解决方法
2017/10/27 jQuery
js中apply与call简单用法详解
2017/11/06 Javascript
使用vuex缓存数据并优化自己的vuex-cache
2018/05/30 Javascript
jQuery使用动画队列自定义动画操作示例
2018/06/16 jQuery
vue项目使用.env文件配置全局环境变量的方法
2019/10/24 Javascript
HTML+JS实现“代码雨”效果源码(黑客帝国文字下落效果)
2020/03/17 Javascript
[03:14]辉夜杯主赛事 12月25日每日之星
2015/12/26 DOTA
详解Python的Django框架中inclusion_tag的使用
2015/07/21 Python
PyQt5 pyqt多线程操作入门
2018/05/05 Python
Python读取YUV文件,并显示的方法
2018/12/04 Python
解决python给列表里添加字典时被最后一个覆盖的问题
2019/01/21 Python
浅析python内置模块collections
2019/11/15 Python
推荐技术人员一款Python开源库(造数据神器)
2020/07/08 Python
python设置表格边框的具体方法
2020/07/17 Python
北欧最好的童装网上商店:Babyshop
2019/09/15 全球购物
Prototype如何为一个Ajax添加一个参数
2015/12/06 面试题
数控技术应届生求职信
2013/11/13 职场文书
新学期家长寄语
2014/01/19 职场文书
舞蹈专业大学生职业规划范文
2014/03/12 职场文书
廉洁使者实施方案
2014/03/29 职场文书
党员教师自我剖析材料
2014/09/29 职场文书
golang 实现并发求和
2021/05/08 Golang