vue使用v-if v-show页面闪烁，div闪现的解决方法
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闪现的解决方法的更多相关文章
- AppStore下载失败使用已购页面再试一次解决方法
AppStore载失败 使用已购页面再试一次解决方法 工具/原料 Mac OS 方法/步骤 1.大家可以先试试更改系统 DNS 的方法,由于苹果的 App Store 应用商店在国外,所以 DNS 如 ...
- vue2.0 页面A跳转到页面B，B页面停留在A页面的滚动位置的解决方法
如果页面A沿Y轴滚动一段距离,然后跳转到页面B: 在进入B页面时,B页面已经滚到页面A的距离,返回页面A,发现A还在之前的滚动位置: 这样体验就很不好,所以我们要进行一些处理: 我的方法是:在路由守卫 ...
- uni-app开发经验分享一： 多页面传值的三种解决方法
开发了一年的uni-app,在这里总结一些uni-app开发中的问题,提供几个解决方法,分享给大家: 问题描述:一个主页面,需要联通一到两个子页面,子页面传值到主页面,主页面更新 问题难点: 首先我们 ...
- mac os 错误提示：下载失败 使用已购页面再试一次 解决方法
最近由于买了macbook,开始用mac os系统,发现一个奇怪的现象,在app store里下载应用,老是提示:下载失败 使用已购页面再试一次 原来一直不知道怎么解决这个问题,今天研究了下,发现解决 ...
- form表单中控件较多,加载完成后切换页面都很慢的解决方法
form表单中控件较多,加载完成后点击都很慢,为什么?我一页面中form表单里面上百个控件(如input.select.radio.checkbox等),还有一些js脚本,加载速度还可以,都能全部显示 ...
- Vue+DataTables warning:table id=xxxx -Cannot reinitialize DataTable.报错解决方法
问题描述: 使用DataTables来写列表,用vue来渲染数据,有搜索功能,每次点击搜索就会报错,如下图所示. 问题排查: 找了一系列原因,最后发现是我每次请求完数据之后都会添加分页功能,从而导致了 ...
- vue 关于父组件无法触发子组件的事件的解决方法
一般情况导致无法触发子组件的方法 基本都是由于子组件未渲染完成 就进行了调用,解决方法如下: 1.加定时器 setTimeout(() => { //加定时器原因是,子组件页面未渲染处理就做 ...
- php 页面调转导致session丢失解决方法
例如在a页面设置了会话,然后打印会话值,可以成功打印,但是调转到b页面后,会话丢失了. 原因有不少,一个原因就是没有在页面开头加入session_start();当然你也可以直接配置php.ini文件 ...
- javascript通过url向jsp页面传递中文参数乱码解决方法
解决方法:在传递参数前将中文参数进行两次编码,jsp页面获取参数后对中文参数进行一次解码,中文参数就不会变为乱码了! 参考例子: <%@ page language="java&quo ...
随机推荐
- Nginx 负载均衡的Cache缓存批量清理的操作记录
1)nginx.conf配置 [root@inner-lb01 ~]# cat /data/nginx/conf/nginx.conf user www; worker_processes 8; #e ...
- Node 系列之url模块
引入 url: const url = require("url"); 用于URL解析.处理等操作的解决方案 1.url.parse(urlStr[, parseQueryStri ...
- 剑指offer：二叉树中和为某一值的路径
本来这只是一个普通的算法题,但是当初自己OJ上提交时,总是提交失败,而我自己认定程序逻辑没有任何问题.然后开始就在本机上调试,结果发现这是由于Python的对象机制而引发的.所以先把问题算法题贴出来, ...
- C_数据结构_递归不同函数间调用
# include <stdio.h> void f(); void g(); void k(); void f() { printf("FFFF\n"); g(); ...
- B. Vova and Trophies
链接 [https://codeforces.com/contest/1082/problem/B] 题意 给你一个包含GS的字符串,只允许交换一次任意不同位置的字符,问最长的连续G串是多少 分析 很 ...
- 20150421 作业5 四则运算 测试与封装 5.1 5.2(doing)
结伴队友:王佳寧,他的博客地址:http://www.cnblogs.com/paopaotai/ 5.2 黑白盒測試 測試項目名稱 黑盒測試 測試人員 葉子鵬&王佳寧 測試編號 測試頁面 測 ...
- 【转】GPS定位准确度CEP、RMS
转自:http://blog.sina.com.cn/s/blog_70f96fda0101lcb9.html CEP和RMS是GPS的定位准确度(俗称精度)单位,是误差概率单位.就拿2.5M CEP ...
- 学习yii2.0——基础入门
声明:本文内容来自于yiichina.com的权威指南. 安装 推荐使用composer来安全,可能有点慢(要下载的依赖比较多). composer create-project --prefer-d ...
- Gradle vs Maven Comparison
https://gradle.org/maven-vs-gradle/ Maven需要搭建本地仓库:Gradle直接集成了仓库. ??? 从Maven转移到Gradle,对于如何使用类似于Maven的 ...
- Event事件2
1,阻止默认行为: 2,事件监听 3,事件流之事件捕获 4,事件委托 阻止默认行为 浏览器中有很多默认行为,比如当点击a标签后,会发生链接的跳转.当点击鼠标的右键时, 会显示右键菜单等. 有些时候,浏 ...