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 的 $(&quot;#id&quot;).html() 无内容的解决方法
Jun 07 Javascript
jQuery UI Autocomplete 1.8.16 中文输入修正代码
Apr 16 Javascript
JavaScript中使用Substring删除字符串最后一个字符
Nov 03 Javascript
SinaEditor使用方法详解
Dec 28 Javascript
js动态生成Html元素实现Post操作(createElement)
Sep 14 Javascript
跟我学习JScript的Bug与内存管理
Nov 18 Javascript
DOM操作和jQuery实现选项移动操作的简单实例
Jun 07 Javascript
JS简单验证上传文件类型的方法
Apr 17 Javascript
AngularJS使用ng-repeat遍历二维数组元素的方法详解
Nov 11 Javascript
微信小程序分享功能之按钮button 边框隐藏和点击隐藏
Jun 14 Javascript
深入浅析Vue.js 中的 v-for 列表渲染指令
Nov 19 Javascript
vue 数字翻牌器动态加载数据
Apr 20 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
WordPress中is_singular()函数简介
2015/02/05 PHP
PHP实现模拟http请求的方法分析
2017/12/20 PHP
php面向对象程序设计中self与static的区别分析
2019/05/21 PHP
jquery实现树形二级菜单实例代码
2013/11/20 Javascript
jQuery设置和获取HTML、文本和值示例
2014/07/08 Javascript
window.print打印指定div指定网页指定区域的方法
2014/08/04 Javascript
JavaScript数组Array对象增加和删除元素方法总结
2015/01/20 Javascript
在父页面得到zTree已选中的节点的方法
2015/02/12 Javascript
JavaScript基本语法讲解
2015/06/03 Javascript
AngularJS中$interval的用法详解
2016/02/02 Javascript
AngularJS 中的指令实践开发指南(一)
2016/03/20 Javascript
学JavaScript七大注意事项【必看】
2016/05/04 Javascript
AngularJS之自定义服务详解(factory、service、provider)
2017/04/14 Javascript
详解angular脏检查原理及伪代码实现
2018/06/08 Javascript
JS 正则表达式验证密码、邮箱格式的实例代码
2018/10/28 Javascript
Vue中用props给data赋初始值遇到的问题解决
2018/11/27 Javascript
图文详解vue框架安装步骤
2019/02/12 Javascript
详解JS实现简单的时分秒倒计时代码
2019/04/25 Javascript
springboot+vue+对接支付宝接口+二维码扫描支付功能(沙箱环境)
2020/10/15 Javascript
在Python3中使用asyncio库进行快速数据抓取的教程
2015/04/02 Python
Python中index()和seek()的用法(详解)
2017/04/27 Python
Django rest framework实现分页的示例
2018/05/24 Python
python 通过 socket 发送文件的实例代码
2018/08/14 Python
python 爬取古诗文存入mysql数据库的方法
2020/01/08 Python
pyecharts在数据可视化中的应用详解
2020/06/08 Python
解决pyinstaller 打包exe文件太大,用pipenv 缩小exe的问题
2020/07/13 Python
python实现学生通讯录管理系统
2021/02/25 Python
购买一个高级域名:BuyDomains
2018/03/11 全球购物
小橄榄树:Le Petit Olivier
2018/04/23 全球购物
FC-Moto英国:欧洲最大的摩托车服装和头盔商店之一
2019/08/25 全球购物
优秀教师演讲稿
2014/05/06 职场文书
党支部2014年度工作总结
2014/12/04 职场文书
法定代表人身份证明书
2015/06/18 职场文书
html+css实现分层金字塔的实例
2021/06/02 HTML / CSS
MySQL索引失效的典型案例
2021/06/05 MySQL
golang内置函数len的小技巧
2021/07/25 Golang