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 相关文章推荐
键盘KeyCode值列表汇总
Nov 26 Javascript
node.js中的http.response.setHeader方法使用说明
Dec 14 Javascript
DOM中事件处理概览与原理的全面解析
Aug 16 Javascript
connection reset by peer问题总结及解决方案
Oct 21 Javascript
基于javascript实现最简单选项卡切换
Feb 01 Javascript
Node.js微信 access_token ( jsapi_ticket ) 存取与刷新的示例
Sep 30 Javascript
VUE前端cookie简单操作
Oct 17 Javascript
Vue起步(无cli)的啊教程详解
Apr 11 Javascript
js实现图片上传到服务器和回显
Jan 19 Javascript
vue学习笔记之Vue中css动画原理简单示例
Feb 29 Javascript
微信小程序实现搜索框功能及踩过的坑
Jun 19 Javascript
LayUI+Shiro实现动态菜单并记住菜单收展的示例
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
一个颜色轮换的简单例子
2006/10/09 PHP
CI(CodeIgniter)框架配置
2014/06/10 PHP
PHP图片裁剪与缩放示例(无损裁剪图片)
2017/02/08 PHP
三个思路解决laravel上传文件报错:413 Request Entity Too Large问题
2017/11/13 PHP
Laravle eloquent 多对多模型关联实例详解
2017/11/22 PHP
PHP实现倒计时功能
2020/11/16 PHP
jQuery参数列表集合
2011/04/06 Javascript
使用ImageMagick进行图片缩放、合成与裁剪(js+python)
2013/09/16 Javascript
js检测输入内容全为空格的方法
2014/05/03 Javascript
AMD异步模块定义介绍和Require.js中使用jQuery及jQuery插件的方法
2014/06/06 Javascript
JavaScript判断FileUpload控件上传文件类型
2015/09/28 Javascript
Seajs 简易文档 提供简单、极致的模块化开发体验
2016/04/13 Javascript
使用BootStrap实现用户登录界面UI
2016/08/10 Javascript
Bootstrap 下拉多选框插件Bootstrap Multiselect
2017/01/22 Javascript
javascript数据类型详解
2017/02/07 Javascript
bootstrap table表格插件使用详解
2017/05/08 Javascript
给Easyui-Datebox设置隐藏或者不可用的解决方法
2017/05/26 Javascript
js实现关闭网页出现是否离开提示
2017/12/07 Javascript
centos 上快速搭建ghost博客方法分享
2018/05/23 Javascript
vue-i18n实现中英文切换的方法
2020/07/06 Javascript
浅谈javascript如何获取文件后缀名
2020/08/07 Javascript
python实现的简单抽奖系统实例
2015/05/22 Python
Windows下Python使用Pandas模块操作Excel文件的教程
2016/05/31 Python
python监控文件或目录变化
2016/06/07 Python
书单|人生苦短,你还不用python!
2017/12/29 Python
Python处理命令行参数模块optpars用法实例分析
2018/05/31 Python
Python使用logging模块实现打印log到指定文件的方法
2018/09/05 Python
python隐藏终端执行cmd命令的方法
2019/06/24 Python
pandas read_excel()和to_excel()函数解析
2019/09/19 Python
如何理解python面向对象编程
2020/06/01 Python
伦敦最受欢迎的蛋糕店:Konditor & Cook
2019/11/01 全球购物
2013英文求职信模板范文
2013/11/15 职场文书
自荐信的基本格式
2014/02/22 职场文书
青年志愿者先进事迹
2014/05/06 职场文书
施工安全汇报材料
2014/08/17 职场文书
项目负责人岗位职责
2015/02/15 职场文书