v-if和v-show可能是日常开发中最常用的两个指令，虽然看上去两者功能是类似的，但是两者还是存在很大区别的。

v-if与v-show区别：

在切换 v-if 块时，Vue.js 有一个局部编译/卸载过程，因为 v-if 之中的模板也可能包括数据绑定或子组件。v-if 是真实的条件渲染，因为它会确保条件块在切换当中合适地销毁与重建条件块内的事件监听器和子组件。

v-if 也是惰性的：如果在初始渲染时条件为假，则什么也不做——在条件第一次变为真时才开始局部编译（编译会被缓存起来）。

相比之下，v-show 简单得多——元素始终被编译并保留，只是简单地基于 CSS 切换。

简单来说二者最大的区别是v-if只会在满足条件时才会编译，而v-show不管是否满足条件始终会编译，v-show的显示与隐藏只是简单的切换CSS的display属性。

适用场景：

明白了二者的本质区别后什么时候适合用v-if什么时候用v-show也变得简单了。

一般来说，v-if 有更高的切换消耗而 v-show 有更高的初始渲染消耗。因此，如果需要频繁切换 v-show 较好，如果在运行时条件不大可能改变 v-if 较好。

比如说现在很多页面在不同端表现是不同的，最常见的是很多的APP页面在微信端打开时页面上会显示下载的提示，而在APP内部则不会，像这样的情况每个端的状态在加载时就是确定的不会变的就适合用v-if，这样在APP内打开时显示下载的部分直接就不会编译。

而像页面上元素根据不同条件显示/隐藏这样的地方用v-show是最合适的了，因为像这种基本上两个状态要频繁切换，如上面所说，v-show的切换消耗是小于v-if的。

在页面层次结构，数据较多的时候，用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页面闪烁，div闪现的解决方法的更多相关文章

  1. AppStore下载失败使用已购页面再试一次解决方法

    AppStore载失败 使用已购页面再试一次解决方法 工具/原料 Mac OS 方法/步骤 1.大家可以先试试更改系统 DNS 的方法,由于苹果的 App Store 应用商店在国外,所以 DNS 如 ...

  2. vue2.0 页面A跳转到页面B，B页面停留在A页面的滚动位置的解决方法

    如果页面A沿Y轴滚动一段距离,然后跳转到页面B: 在进入B页面时,B页面已经滚到页面A的距离,返回页面A,发现A还在之前的滚动位置: 这样体验就很不好,所以我们要进行一些处理: 我的方法是:在路由守卫 ...

  3. uni-app开发经验分享一： 多页面传值的三种解决方法

    开发了一年的uni-app,在这里总结一些uni-app开发中的问题,提供几个解决方法,分享给大家: 问题描述:一个主页面,需要联通一到两个子页面,子页面传值到主页面,主页面更新 问题难点: 首先我们 ...

  4. mac os 错误提示：下载失败 使用已购页面再试一次 解决方法

    最近由于买了macbook,开始用mac os系统,发现一个奇怪的现象,在app store里下载应用,老是提示:下载失败 使用已购页面再试一次 原来一直不知道怎么解决这个问题,今天研究了下,发现解决 ...

  5. form表单中控件较多,加载完成后切换页面都很慢的解决方法

    form表单中控件较多,加载完成后点击都很慢,为什么?我一页面中form表单里面上百个控件(如input.select.radio.checkbox等),还有一些js脚本,加载速度还可以,都能全部显示 ...

  6. Vue+DataTables warning:table id=xxxx -Cannot reinitialize DataTable.报错解决方法

    问题描述: 使用DataTables来写列表,用vue来渲染数据,有搜索功能,每次点击搜索就会报错,如下图所示. 问题排查: 找了一系列原因,最后发现是我每次请求完数据之后都会添加分页功能,从而导致了 ...

  7. vue 关于父组件无法触发子组件的事件的解决方法

    一般情况导致无法触发子组件的方法  基本都是由于子组件未渲染完成 就进行了调用,解决方法如下: 1.加定时器  setTimeout(() => { //加定时器原因是,子组件页面未渲染处理就做 ...

  8. php 页面调转导致session丢失解决方法

    例如在a页面设置了会话,然后打印会话值,可以成功打印,但是调转到b页面后,会话丢失了. 原因有不少,一个原因就是没有在页面开头加入session_start();当然你也可以直接配置php.ini文件 ...

  9. javascript通过url向jsp页面传递中文参数乱码解决方法

    解决方法:在传递参数前将中文参数进行两次编码,jsp页面获取参数后对中文参数进行一次解码,中文参数就不会变为乱码了! 参考例子: <%@ page language="java&quo ...

随机推荐

  1. 运维中的日志切割操作梳理（Logrotate/python/shell脚本实现）

    对于Linux系统安全来说,日志文件是极其重要的工具.不知为何,我发现很多运维同学的服务器上都运行着一些诸如每天切分Nginx日志之类的CRON脚本,大家似乎遗忘了Logrotate,争相发明自己的轮 ...

  2. idea使用优化

    一.idea设置目录说明 1.bin目录包含我们的启动文件.虚拟机配置信息和idea属性信息等 2.help目录:帮助文档 3.jre64 : idea自带的jre环境 4.lib:idea所依赖的类 ...

  3. <构建之法>13-17

    13章软件测试. 从基本名词到软件测试的分类方法,啃完这15页书,至少对与软件测试的理解程度不是停留在以前的层次(让用户使用,然后提出碰到什么问题) 测试不是那么简单就阐述的完全.测试按测试目的分类可 ...

  4. C#获取当月第一天和最后一天

    当月第一天0时0分0秒: DateTime.Now.AddDays(1 - DateTime.Now.Day).Date 当月最后一天23时59分59秒: DateTime.Now.AddDays(1 ...

  5. CMake系列之四：多个源文件-多个目录

    多个源文件,多个目录 现在进一步将MathFunctions.c和MathFunctions.h文件移到math目录下: ./Demo3 | +--- main.c | +--- math/ | +- ...

  6. Mac+Docker环境下xdebug的配置

    由于容器化的需要,前几天我本地也换成了docker环境.就研究了一下docker环境下phpstorm和xdebug的配置. http://www.mmfei.com/?p=453 这个博客给出了一个 ...

  7. MiniDP与HDMI的关系

    高清输出革命先行者:HDMI接口 HDMI高清晰度多媒体接口(英文:High Definition Multimedia Interface,HDMI)是一种数字化视频/音频接口技术,是适合影像传输的 ...

  8. KNN python实践

    本文实现了一个KNN算法,准备用作词频统计改进版本之中,这篇博文是从我另一个刚开的博客中copy过来的. KNN算法是一个简单的分类算法,它的动机特别简单:与一个样本点距离近的其他样本点绝大部分属于什 ...

  9. MySQL-如何删除hash表分区

    一个大表,之前是以hash分区表的形式存在的, MySQL> show create table history_uint; | history_uint | CREATE TABLE `his ...

  10. hdu1285

    解题思路:拓扑排序+优先队列,每次找入度为零时的点的时候且值最小的...我觉得题目有点问题,刚开始写的时候,以为样例的答案是1 4 2 3,毕竟1和4没输过啊...结果去看了样例一眼,傻了. #inc ...