v-if和v-for
<!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">
<meta name="author" content="杨欣">
<title>v-if和v-for</title>
</head>
<body>
<div id="app">
<p v-if="hasFlag" v-for="(list, index) in lists" :key="index">{{list.title}}</p>
<!-- <template v-if="hasFlag">
<p v-for="(list, index) in lists" :key="index">{{list.title}}</p>
</template> -->
</div>
<script src="./dist/vue.js"></script>
<script>
let app = new Vue({
el: "#app",
data: {
lists: [
{ title: 123 },
{ title: 456 }
]
},
computed: {
hasFlag() {
return this.lists && this.lists.length > 0
}
},
})
console.log(app.$options.render);
// ƒ anonymous(
// ) {
// with (this) { return _c('div', { attrs: { "id": "app" } }, _l((lists), function (list, index) { return (hasFlag) ? _c('p', { key: index }, [_v(_s(list.title))]) : _e() })) }
// }
// 1、v-for优先于v-if被解析
// 2、如果同时出现，每次渲染都会先执行循环再判断条件，无论如何循环都不可避免，浪费了性能
// 3、要避免出现这种情况，则在外层嵌套template，在这一层进行v-if判断，然后在内部进行v-for循环
// 4、如果条件出现在循环内部，可通过计算属性提前过滤掉那些不需要显示的项
</script>
</body>
</html>
v-if和v-for的更多相关文章
- Oracle基本数据字典:v$database、v$instance、v$version、dba_objects
v$database: 视图结构: SQL> desc v$database; Name Null? Type - ...
- 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 ...
- 临时文件相关的v$tempfile v$sort_usage与V$tempseg_usage
SQL> select username,user,segtype,segfile#,segblk#,extents,segrfno# from v$sort_usage; SEGFILE#代表 ...
- [强连通分量] 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的路径. 方法是,找出图中所有强连通分量,强连通分量上的点肯定也是满足单连通性的,然后对强连通分量进行缩点,缩点后就变 ...
- poj 2762 Going from u to v or from v to u?
题目描述:为了让他们的儿子变得更勇敢些,Jiajia和Wind将他们带到一个大洞穴中.洞穴中有n个房间,有一些单向的通道连接某些房间.每次,Wind选择两个房间x和y,要求他们的一个儿子从一个房间走到 ...
- POJ 2762 Going from u to v or from v to u? (强连通分量缩点+拓扑排序)
题目链接:http://poj.org/problem?id=2762 题意是 有t组样例,n个点m条有向边,取任意两个点u和v,问u能不能到v 或者v能不能到u,要是可以就输出Yes,否则输出No. ...
- poj 2762 Going from u to v or from v to u?(强连通分量+缩点重构图+拓扑排序)
http://poj.org/problem?id=2762 Going from u to v or from v to u? Time Limit: 2000MS Memory Limit: ...
- POJ 2762 Going from u to v or from v to u?（强联通 + TopSort）
题目大意: 为了锻炼自己的儿子 Jiajia 和Wind 把自己的儿子带入到一个洞穴内,洞穴有n个房间,洞穴的道路是单向的. 每一次Wind 选择两个房间 x 和 y, 让他的儿子从一个房间走到 ...
随机推荐
- SpringBoot中BeanValidation数据校验与优雅处理详解
目录 本篇要点 后端参数校验的必要性 不使用Validator的参数处理逻辑 Validator框架提供的便利 SpringBoot自动配置ValidationAutoConfiguration Va ...
- Ceph实现数据的'不拆分'
前言 之前看过一个朋友一篇文章,讲述的是Vsan为什么使用的是两副本,而ceph则大多数情况下需要三副本,当时个人观点是这个并不是关键点,但是在仔细考虑了问题的出发点以后,这个也可以说是其中的一个点 ...
- Mysql的下载，安装，远程连接，密码加密规则修改。
第一次接触mysql,,很多地方不懂,出了很多问题.本来应该在Linux系统中安装mysql的,但是奈何各种电脑限制,所以在公司电脑的Windows service R2 系统上装了mysql数据库. ...
- 免费|申请谷歌云服务器|msf安装
apt-get install -y wget 参考链接 知乎-免费|申请谷歌云服务器 知乎-免费|申请谷歌云服务器 cnblogs-debian.ubuntu安装metasploit通用方法 谷歌云 ...
- 怎么用MindManager2019去做一个好的网络图
大家知道网络图吗?是由作业(箭线).事件(又称节点)和路线三个因素组成的.它是一种图解模型,形状如同网络,故称为网络图.运用网络图能够使步骤简洁明了,今天我我们就说一说网络图软件MindManager ...
- ABBYY FineReader文档对比实例讲解
ABBYY FineReader企业版与标准版有一个重大的区别,就是企业版有对比文档的功能,今天通过下面的文档对比实例,来向大家展示一下OCR文字识别工具ABBYY FineReader的使用技巧. ...
- pytest和unittest中参数化如何做
参数化应用场景,一个场景的用例会用到多条数据来进行验证,比如登录功能会用到正确的用户名.密码登录,错误的用户名.正确的密码,正确的用户名.错误的密码等等来进行测试,这时就可以用到框架中的参数化,来便捷 ...
- synchronized关键字的内存语义
以下内容摘自:Java并发编程之美 加锁和释放锁的语义:当获取锁以后会清空锁块内本地内存中将会被用到的共享变量,在使用这些共享变量的时从主内存进行加载,在释放锁时将本地内存中修改的 共享变量刷新到主内 ...
- 日常踩坑-------新手使用idea
mybatis在idea的maven项目中的坑 今天遇到mybatis的报错,搞了好久才搞懂,在网上找了好久的相似案例,也没有搞定,先来看下网上常见的解决办法吧,相信也能解决大部分人的报错. 1.ma ...
- Linux root目录空间过小，加大空间
1. 查看还有多少空间可以使用: df -h 这里可以看出来home的空间还很大,可以分配给root 2. 扩容根目录的思路如下: 将/home文件夹备份,删除/home文件系统所在的逻辑卷,增大/文 ...