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 相关文章推荐
用jscript启动sqlserver
Jun 21 Javascript
jquery UI 1.72 之datepicker
Dec 29 Javascript
清空上传控件input file的值
Jul 03 Javascript
js类型转换与引用类型详解(Boolean_Number_String)
Mar 07 Javascript
jquery+ajax实现跨域请求的方法
Jan 20 Javascript
JS交换变量的方法
Jan 21 Javascript
JavaScript简单判断复选框是否选中及取出值的方法
Aug 13 Javascript
使用Node.js处理前端代码文件的编码问题
Feb 16 Javascript
JavaScript的MVVM库Vue.js入门学习笔记
May 03 Javascript
javascript将中国数字格式转换成欧式数字格式的简单实例
Aug 02 Javascript
AngularJS 中的Promise --- $q服务详解
Sep 14 Javascript
AngularJS 中ui-view传参的实例详解
Aug 25 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
第十一节--重载
2006/11/16 PHP
利用ThinkPHP内置的ThinkAjax实现异步传输技术的实现方法
2011/12/19 PHP
PHP 使用MySQL管理Session的回调函数详解
2013/06/21 PHP
解析PHP提交后跳转
2013/06/23 PHP
PHP面向对象程序设计之类常量用法实例
2014/08/20 PHP
Laravel 自带的Auth验证登录方法
2019/09/30 PHP
js cookies实现简单统计访问次数
2009/11/24 Javascript
JS 实现导航栏悬停效果
2013/09/23 Javascript
Js nodeType 属性全面解析
2013/11/14 Javascript
基于jQuery的网页影音播放器jPlayer的基本使用教程
2016/03/08 Javascript
纯js实现手风琴效果
2020/04/17 Javascript
JavaScript表单验证的两种实现方法
2017/02/11 Javascript
JS实现AES加密并与PHP互通的方法分析
2017/04/19 Javascript
node打造微信个人号机器人的方法示例
2018/04/26 Javascript
解决vue router组件状态刷新消失的问题
2018/08/01 Javascript
layer弹出层父子页面事件相互调用方法
2018/08/17 Javascript
浅谈Node新版本13.2.0正式支持ES Modules特性
2019/11/25 Javascript
JS实现百度搜索框关键字推荐
2020/02/17 Javascript
React实现todolist功能
2020/12/28 Javascript
javascript实现倒计时提示框
2021/03/02 Javascript
用Pycharm实现鼠标滚轮控制字体大小的方法
2019/01/15 Python
PyQt5+requests实现车票查询工具
2019/01/21 Python
python GUI图形化编程wxpython的使用
2019/07/19 Python
Python打包工具PyInstaller的安装与pycharm配置支持PyInstaller详细方法
2020/02/27 Python
Python中bisect的用法及示例详解
2020/07/20 Python
详解python方法之绑定方法与非绑定方法
2020/08/17 Python
python boto和boto3操作bucket的示例
2020/10/30 Python
在阿联酋购买翻新手机和平板电脑:Teckzu
2021/02/12 全球购物
在浏览器端如何得到服务器端响应的XML数据
2012/11/24 面试题
应届电子商务毕业自荐书范文
2014/02/11 职场文书
大学生第一学年自我鉴定2015
2014/09/28 职场文书
单位提档介绍信
2015/10/22 职场文书
浅谈redis五大数据结构和使用场景
2021/04/12 Redis
详解PHP用mb_string处理windows中文字符
2021/05/26 PHP
JVM入门之类加载与字节码技术(类加载与类的加载器)
2021/06/15 Java/Android
Go gRPC进阶教程gRPC转换HTTP
2022/06/16 Golang