vue使用v-if v-show页面闪烁,div闪现的解决方法
作者:肾虚少年 发布时间:2024-04-28 09:31:49
标签:vue,v-if,v-show,div
在页面层次结构,数据较多的时候,用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闪现的解决方法网站的支持!
来源:https://blog.csdn.net/woshidamimi0/article/details/82851036


猜你喜欢
- js浮点数计算有时是不准确的,比如7*0.8 == 7*8/10的值为false,因为7*0.8=5.6000000000000005,乘出
- 描述如下: 用mysqldump 导出 Trigger 的时候遇到一个问题,贴出来,以免大家犯错。 在执行下面的操作时: [root@ytt
- 引言最近遭遇了绑定手机号相关的压测需求,有了手机号登录的经验和测试数据,这次算起来比较简单。最重要的是难点就是要求开发配合调整配置已经在上一
- WEB程序员的技能要求: Web程序员不光要对 后端程序(如 php,jsp,asp.net)语言知识,对程序设计架构知识,数据库
- 签名import base64import jsonimport timefrom datetime import datetimeimpo
- Pycharm实然提示过期了,网上找了很多Pycharm激活码,要么只支持老版本,要么是不能用。费了半天时间终于在一公众号里找到一枚可以使用
- 前言一个表和多个表进行关联,但具体随着业务的加深,表不断的增加,关联的数量不断的增加,怎么通过一开始通过表的设计后,不在后期在修改表,彻底的
- 我最近用MYSQL数据库挺多的,发现了一些非常有用的小玩意,今天拿出来分享到大家,希望对你会有所帮助。1.group_concat在我们平常
- 本文实例为大家分享了js实现幸运抽奖九宫格大转盘效果,供大家参考,具体内容如下实现代码:<!DOCTYPE html><h
- 注释标注解释,目的是帮助读者理解的文本也就是说,注释首先是文本,其二是说明,其三是思路,其四是例子注释有两种形式1. # ... 单行注释用
- 一、方法原理(步骤)1.将彩色图片转换为灰度图片(调用opencv的cvtColor()方法);2.将图片分割为若干个小方块,后面会统一小方
- 一、准备工作1.1 Python安装包的下载(说明:python版本可根据自己需求更换)官网下载:https://www.python.or
- 1. 什么是存储过程?存储过程是SQL server所提供的Tran
- meta是html语言head区的一个辅助性标签。几乎所有的网页里,我们可以看到类似下面这段的html代码:<head> <meta&nbs
- 了解blockchain的概念很简单(区块链,交易链块):它是分布式的(即不是放置在同一台机器上,不同的网络设备上的)数据库支持主办记录日益
- 废话不多说,先给大家展示一下效果图,如果大家感觉不错,请参考实现代码。效果图如下所示:代码如下所示:<!DOCTYPE html PU
- 大家都知道系统存储过程是无法用工具导出的(大家可以试试 >任务>生成SQL脚本) 因为系统存储过程一般是不让开发人员修改的。 需
- 前言在小程序中,e.target与e.currentTarget是非常重要的,尤其是涉及到页面传值时currentTarget和target
- 问题你想读写一个gzip或bz2格式的压缩文件。解决方案gzip 和 bz2 模块可以很容易的处理这些文件。 两个模块都为 open() 函
- 本文实例讲述了mysql变量用法。分享给大家供大家参考,具体如下:本文内容:系统变量用户变量局部变量首发日期:2018-04-18系统变量: