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, 让他的儿子从一个房间走到 ...
随机推荐
- centos7安装数据库 (系统包含预装环境mariadb)
查看系统是否安装了MySQL,有些没安装但是有路径,那是因为系统安装了mariadb-libs,对应的配置文件目录:/etc/my.cnf(下面就根据mariadb来安装mysql) 查看系统预装ma ...
- Ceph部署mon出现0.0.0.0地址
前言 最近在群里两次看到出现mon地址不对的问题,都是显示0.0.0.0:0地址,如下所示: [root@lab8106 ceph]# ceph -s cluster 3137d009-e41e-41 ...
- DB2 建表，添加字段，删除字段，修改字段等常用操作
转载:http://blog.sina.com.cn/s/blog_67aaf4440100v01p.html,稍作修改. --创建数据库 create database Etp; --连接数据库 c ...
- 源码分析：CountDownLatch 之倒计时门栓
简介 CountDownLatch 是JDK1.5 开始提供的一种同步辅助工具,它允许一个或多个线程一直等待,直到其他线程执行的操作完成为止.在初始化的时候给定 CountDownLatch 一个计数 ...
- 大数据和Hadoop平台介绍
大数据和Hadoop平台介绍 定义 大数据是指其大小和复杂性无法通过现有常用的工具软件,以合理的成本,在可接受的时限内对其进行捕获.管理和处理的数据集.这些困难包括数据的收入.存储.搜索.共享.分析和 ...
- 面试官：你说你精通SpringBoot，你给我说一下类的自动装配吧
## 剖析@SpringBootApplication注解 创建一个SpringBoot工程后,SpringBoot会为用户提供一个Application类,该类负责项目的启动: ```@Spring ...
- 工作三年终于社招进字节跳动！字节跳动，阿里，腾讯Java岗面试经验汇总
前言 我大概我是从去年12月份开始看书学习,到今年的6月份,一直学到看大家的面经基本上百分之90以上都会,我就在5月份开始投简历,边面试边补充基础知识等.也是有些辛苦.终于是在前不久拿到了字节跳动的o ...
- 新鲜出炉！花了三天整理的JVM复习知识点，面试突击必备！
此次JVM知识点包含以下几个部分 1.类加载机制 2.jvm运行时数据区 3.java对象内存布局 4.jvm内存模型 5.垃圾回收机制 6.垃圾收集器 7.问题排查 一 类加载机制 主要说的部分是这 ...
- zabbix的搭建及操作（3）监控 MySQL 及 HTTP 状态监控
书接上回 -- 详情点击 Server端以配置好 mariadb(MySQL) 及 http 服务 Zabbix实现监控 mysql 数据库 server服务器端配置 vim /usr/local/z ...
- Jmeter如何监测被测服务器资源
前言 Jmeter自身不支持对服务器的监控,需要安装第三方插件进行扩展. 下载插件 jmeter添加插件步骤,选项-PluginManager 勾选上PerfMon选项,点击右下角的Apply-按钮 ...