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, 让他的儿子从一个房间走到 ...
随机推荐
- ViewPager2与ViewPager的区别
viewpager: viewpager有2个弊端: 1.不能关闭预加载 2.更新adapter不生效 我们在加载数据的时候,viewpager默认会帮我们预加载前后两个页面的数据,并且这2个vi ...
- C++调用Go方法的字符串传递问题及解决方案
摘要:C++调用Go方法时,字符串参数的内存管理需要由Go侧进行深度值拷贝. 现象 在一个APP技术项目中,子进程按请求加载Go的ServiceModule,将需要拉起的ServiceModule信息 ...
- cetos6.5 gcc4.8 安装
1.准备源 #安装仓库 wget http://people.centos.org/tru/devtools-2/devtools-2.repo mv devtools-2.repo /etc/yum ...
- python 第二天 之循环与判断
人生苦短我用python------这句话说的一点都没有错,python功能真的是太强大了,最主要的节约时间,节约时间对于一个程序员意味着什么?意味着早睡,意味着更多的时间可以干更多的活.少熬了了多少 ...
- pycharm 报错及解决方法
1.报错: AttributeError: 'list' object has no attribute 'click' 原因:应是find_element_by 不是 find_elements_b ...
- android开发导包升级到androidx踩坑记录【转载】
最近一直在做安卓开发,奈何手中的资料比较老,资料上的一些Import经常没有,十分让人头疼. 感谢简书上的[张晴天天天天天]做的整理. 在这里也记录一下备用. 升级Android Studio后,在 ...
- 掌握Python可以去哪些岗位？薪资如何？
一.人工智能 Python作为人工智能的黄金语言,选择人工智能作为就业方向是理所当然的,就业前景也还不错.人工智能工程师的招聘起薪一般在20K-35K,如果是初级工程师,起薪一般12K. 二.大数据 ...
- 面试大厂必看！就凭借这份Java多线程和并发面试题，我拿到了字节和美团的offer！
最近好多粉丝私信我说在最近的面试中老是被问到多线程和高并发的问题,又对这一块不是很了解,很简单就被面试官给问倒了,被问倒的后果当然就是被刷下去了,因为粉丝要求,我最近也是花了两天时间 给大家整理了这一 ...
- Guitar Pro 7教程之打开播放文件的操作技巧
前面的章节我们讲过了很多关于Guitar Pro的相关教程,由于最近{cms_selflink page='index' text='Guitar Pro'} 7中文版刚上新没多久,很多玩吉他的小伙伴 ...
- Camtasia中对录制视频进行编辑——交互性
随着新媒体的广泛发展,视频处理的需要也逐渐变得越来越大,很多人都不知道市场上的哪款软件是比较符合大众需要的.有的软件功能写的天花乱坠,但是实际操作确很难.并不符合大众的简单需求. 今天我便给大家推荐一 ...