c2010页面闪现_vue使用v-if v-show页面闪烁,div闪现的解决方法
在页面层次结构,数据较多的时候,用v-if或者v-show就会出现div闪现,或者部分闪烁的结果。
可以在根元素添加v-cloak来解决,并且设置它的样式即可。
代码只是示例,还需要自己修改测试。
Document
[v-cloak]
{
display: none;
}
content
new Vue(
{
el: '#app',
data ()
{
return {
isShow: false
}
}
})
下面看下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闪现的解决方法,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对脚本之家网站的支持!
c2010页面闪现_vue使用v-if v-show页面闪烁,div闪现的解决方法相关推荐
- c2010页面闪现_Vue.js中 v-if 和v-else-if页面加载出现闪现的问题及解决方法
Vue.js中 v-if 和v-else-if页面加载出现闪现的问题及解决方法 发布于 2020-2-22| 复制链接 vue中v-if 和v-else-if在页面加载的时候,不满足条件的标签会加载然 ...
- android 按钮点击返回顶部,微信浏览器点击系统返回,安卓返回会重载页面回到页面顶部,iOS则返回则会保留之前浏览位置的解决方法...
后续补我框好串端题近还架比作和和近还架比作和和充: 页面css设置了height: 100%,来避免使用fixed定位弹窗引起的部分机型兼容问题,因此会在返回的时候回到页面顶部,补充解决办法: 在弹窗 ...
- html页面整体偏移了怎么办,html2canvas生成的图片偏移不完整的解决方法
情景一: 问题背景:生成的图片在一个弹窗里面,如果页面没有滚动条就是正常的,但是一旦出现滚动条并且页面发生滚动时html2canvas绘制成的图片就会偏移出对应滚动高度的白边,如下: 解决办法: 楼主 ...
- vue子组件mounted不执行_vue 路由子组件created和mounted不起作用的解决方法
vue 路由子组件created和mounted不起作用的解决方法 判断项目是否启用keep-alive 启用 使用exclude排除组件(我没有成功不知道为什么) 使用v-if判断(成功解决) 可以 ...
- html页面微信分享如何隐藏链接,微信分享网页链接缩略图不显示解决方法
微信分享网页不显示缩略图片的原因 为规范自定义分享链接功能在网页上的使用,自2017年4月25日起,JSSDK"分享到朋友圈"及"发送给朋友"接口,自定义的分享 ...
- ajax绑定事件页面重复提交,Ajax局部更新导致JS事件重复触发问题的解决方法
如果在页面中包含一个ajax更新的列表,那么需要小心非动态更新部分的事件处理. 以带有公共工具栏的列表界面为例: | Menu1 | Menu2 --------------------------- ...
- vue所有页面刷新一次mounted(以及所有生命周期函数)执行两次的解决方法
刚开始我发现页面每刷新一次,接口都请求两次,我以为是因为axios发送OPTIONS预检请求,但是我发现两次请求都是正常的get或者是post请求,并且只有在页面刷新的时候请求才触发两次,点击查询或者 ...
- 百分比布局Design页面无法显示 :The following classes could not be found 解决方法
关于百分比布局Design页面 :The following classes could not be found: android.percentlayout.widget.PercentRelat ...
- list vue 删除后页面渲染_Vue项目中v-for数组删除第n项元素产生渲染错误问题及解决方法...
项目背景 最近使用Vue(版本2.9)开发一个项目时,要生成表单列表,所以使用了v-for来做循环,循环里的元素(item)是一个子组件.同时每个元素都有删除按钮,点击后删除当前元素. 初始代码如下: ...
最新文章
- python3 处理 html转义字符
- Spring Data Jpa、Jpa、Hibernate、JDBC四者之间的关系
- 红帽linux iso镜像,红帽 Red Hat Linux相关产品iso镜像下载
- (2)HTML基本标签
- c++11测试时间封装
- 上位机和下位机的概念
- freeswitch 自定义application
- vue3前端项目引入iconfont阿里图标
- SAP采购计划协议(SA)中的计划行统计清单
- WhatsApp群控的好处,为什么使用SendWS拓客系统实现WhatsApp耐用账号的群控管理?
- Fiddler抓取视频数据
- preg_match详解
- 一次使用NodeJS实现网页爬虫记 - huanping - 博客园
- 谷氨酰胺主要用途,以及谷氨酰胺测定试剂盒研究
- whaleCTF MISC_Writeup(姿势大全)
- Spark学习痛点和路线图
- 微机原理及故障的维修(BIOS)
- 四川省达州市谷歌高清卫星地图下载(百度网盘离线包下载)
- Word文档修复实战
- 无线WiFi网络的密码破解攻防及原理详解
热门文章
- centos7全盘备份到本地_CentOS7下制作openssl1.1.1i RPM包并升级
- elasticsearch java_java Elasticsearch详细介绍及使用实例分析
- Code First :使用Entity. Framework编程(6) ----转发 收藏
- spring-boot+swagger实现WebApi文档
- JAVA基础学习之路(三)类定义及构造方法
- c++11标准:匿名函数(匿名表达式)lambda
- doctype声明、浏览器的标准、怪异等模式
- MySQL innodb每行数据长度的限制
- 给年薪不到48w的程序员提个醒!!
- 华为宣布:免费培养8000名嵌入式开发者!学习免费!实践免费!辅导免费!