黑马vue---20、v-if和v-show的使用和特点
黑马vue---20、v-if和v-show的使用和特点
一、总结
一句话总结:
v-if 的特点:每次都会重新删除或创建元素
v-show 的特点: 每次不会重新进行DOM的删除和创建操作,只是切换了元素的 display:none 样式
二、内容在总结中
1、Vue指令之v-if
和v-show
一般来说,v-if 有更高的切换消耗而 v-show 有更高的初始渲染消耗。因此,如果需要频繁切换 v-show 较好,如果在运行时条件不大可能改变 v-if 较好。
2、代码
<!DOCTYPE html>
<html lang="en"> <head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<script src="./lib/vue-2.4.0.js"></script>
</head> <body>
<div id="app"> <!-- <input type="button" value="toggle" @click="toggle"> -->
<input type="button" value="toggle" @click="flag=!flag"> <!-- v-if 的特点:每次都会重新删除或创建元素 -->
<!-- v-show 的特点: 每次不会重新进行DOM的删除和创建操作,只是切换了元素的 display:none 样式 --> <!-- v-if 有较高的切换性能消耗 -->
<!-- v-show 有较高的初始渲染消耗 --> <!-- 如果元素涉及到频繁的切换,最好不要使用 v-if, 而是推荐使用 v-show -->
<!-- 如果元素可能永远也不会被显示出来被用户看到,则推荐使用 v-if -->
<h3 v-if="flag">这是用v-if控制的元素</h3>
<h3 v-show="flag">这是用v-show控制的元素</h3> </div> <script>
// 创建 Vue 实例,得到 ViewModel
var vm = new Vue({
el: '#app',
data: {
flag: false
},
methods: {
/* toggle() {
this.flag = !this.flag
} */
}
});
</script>
</body> </html>
黑马vue---20、v-if和v-show的使用和特点的更多相关文章
- Oracle基本数据字典:v$database、v$instance、v$version、dba_objects
v$database: 视图结构: SQL> desc v$database; Name Null? Type - ...
- 临时文件相关的v$tempfile v$sort_usage与V$tempseg_usage
SQL> select username,user,segtype,segfile#,segblk#,extents,segrfno# from v$sort_usage; SEGFILE#代表 ...
- Oracle体系结构之Oracle基本数据字典:v$database、v$instance、v$version、dba_objects
v$database: 视图结构: SQL> desc v$database; Name Null? Type - ...
- [转]查看处于被锁状态的表:v$locked_object dba_objects v$session all_objects v$sqlarea v$lock
oracle官网当一个用户发出select..for update的错作准备对返回的结果集进行修改时,如果结果集已经被另一个会话锁定,就是发生阻塞.需要等另一个会话结束之后才可继续执行.可以通过发出 ...
- 转:oracle几组重要的常见视图-v$latch,v$latch_children,v$lock,v$locked_object
v$latch Oracle Rdbms应用了各种不同类型的锁定机制,latch即是其中的一种.Latch是用于保护SGA区中共享数据结构的一种串行化锁定机制.Latch的实现是与操作系统相关的, 尤 ...
- oracle 入门笔记--v$sql和v$sqlarea视图(转载)
转载于作者:dbtan 原文链接:http://www.dbtan.com/2009/12/vsql-and-vsqlarea-view.html v$sql和v$sqlarea视图: 上文提到,v$ ...
- POJ2762 Going from u to v or from v to u(单连通 缩点)
判断图是否单连通,先用强连通分图处理,再拓扑排序,需注意: 符合要求的不一定是链拓扑排序列结果唯一,即在队列中的元素始终只有一个 #include<cstdio> #include< ...
- Going from u to v or from v to u?_POJ2762强连通+并查集缩点+拓扑排序
Going from u to v or from v to u? Time Limit: 2000MS Memory Limit: 65536K Description I ...
- [强连通分量] POJ 2762 Going from u to v or from v to u?
Going from u to v or from v to u? Time Limit: 2000MS Memory Limit: 65536K Total Submissions: 17089 ...
- POJ2762 Going from u to v or from v to u?(判定单连通图:强连通分量+缩点+拓扑排序)
这道题要判断一张有向图是否是单连通图,即图中是否任意两点u和v都存在u到v或v到u的路径. 方法是,找出图中所有强连通分量,强连通分量上的点肯定也是满足单连通性的,然后对强连通分量进行缩点,缩点后就变 ...
随机推荐
- Linux设备驱动中的软件架构思想
目录 更新记录 一.Linux驱动的软件架构 1.1 出发点 1.2 分离思想 1.3 分层思想 二.platform设备驱动 2.1 platform设备 2.2 platform驱动 2.3 pl ...
- Springboot整合MybatisPlus
目录 1.pom文件 2.创建CodeGenerator.java 3.在application.yml中配置mybatis-plus 4.创建MybatisPlusConfig.java文件 其他 ...
- datagrid如何获取选中行的索引
//datagrid获取选中行 var row =baseSelectgrid.datagrid('getSelected'); // 获取被选中行的索引 index var index=baseSe ...
- RPC、RMI、REST的区别
初入职场,接触了不少企业常用的技术,与学校实训使用的技术有很大差异,在这里记录一下RPC.RMI与REST的区别. 概念 RPC(Remote Procedure Call,远程过程调用) 一种通过从 ...
- K2 BPM_携手东航物流,领跑全球航空物流业_全球领先的工作流引擎
现代物流产业正在世界范围内广泛兴起,物流产业已成为各个国家国民经济发展的动脉和基础产业.随着物流新格局的加速形成,商业竞争的核心要素已经从传统的对资产资源的占有,演化为对资本.人才与技术的争夺,流量. ...
- Servlet和JSP学习总结
目录 Jsp会被编译成servlet,在页面被第一次访问的时候 Jsp中可以在html页面中嵌入java代码或者引入jsp标签 可以在html中引入自定义标签 Web工程的目录结构 Jsp的注释 Js ...
- Python 嵌套列表解析
将一个3*4矩阵转为4*3矩阵Matrix = [ [1, 2, 3, 4], [5, 6, 7, 8], [9, 10, 11, 12],]afterMatrix = [[row[i] for ro ...
- android提升
https://blog.csdn.net/lou_liang/article/details/82856531
- CentOS 6.10 系统安装
本章内容: CentOS 6.10 的安装 一.安装光盘,选择 Install or upgrade an existing system 二.选择 skip 跳过光盘检查 三.选择 Next 四.选 ...
- 009.增删查改语法(sql实例)
--------------------------------------------合并结果集SELECT UNION -------------------------------------- ...