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, 让他的儿子从一个房间走到 ...
随机推荐
- 客户的一个紧急bug，我用了两种方式进行 C# 反编译修改源码
一:背景 1. 讲故事 周五下午运营反馈了一个紧急bug,说客户那边一个信息列表打不开,急需解决,附带的日志文件也发过来了,看了下日志大概是这样的: 日期:2020-11-13 12:25:45,92 ...
- 微服务下的持续集成-Jenkins自动化部署GitHub项目
@ 目录 一.前言 二.DevOps概念 三.为什么要做持续集成 四.常见云服务 五.手动部署Jenkins 5.1 准备工作 5.2 下载 5.3 启动 5.4 配置 5.5 Jenkins 首页 ...
- C# 9.0新特性详解系列之一：只初始化设置器（init only setter)
1.背景与动机 自C#1.0版本以来,我们要定义一个不可变数据类型的基本做法就是:先声明字段为readonly,再声明只包含get访问器的属性.例子如下: struct Point { public ...
- NVM、NPM、Node.js的安装选择
在安装和使用这三种工具时,我们有很多方式可以选择,这些方法各有优劣,每个人都有自己用起来比较习惯的配置,所以我在这里记录下自己比较习惯的一种安装方式与其他一些可能的选项. NVM.NPM.Node.j ...
- Java 中常见的细粒度锁实现
上篇文章大致说了下 ReentrantLock 类的使用,对 ReentrantLock 类有了初步的认识之后让我们一起来看下基于 ReentrantLock 的几种细粒度锁实现. 这里我们还是接着用 ...
- 如何用Vegas完成视频编辑中的自动跟踪换图
Vegas作为一款专业的视频剪辑软件,剪辑速度快捷,拥有各种实用工具和特效,同样也可以为用户实现视频换图的需求.今天小编就为大家讲解,如何利用Vegas自动跟踪进行换图,让视频能够更加便捷的呈现. 本 ...
- iMindMap：一款可以免费试用的思维导图软件
思维导图在我们的生活中已经越来越常见了,在市场上也有很多思维导图的软件.今天小编给大家推荐的是一款免费思维导图软件-iMindMap.它具有22种布局模式,包含组织架构图.鱼骨图.时间线.气泡图等,3 ...
- Thrift接口简介
参考地址:http://roclinux.cn/?p=3316 [thrift是什么] 计算机技术里一款著名的通信框架 – thrift框架 thrift的全名叫做Apache thrift,是一款软 ...
- LeetCode双周赛#35
1589. 所有排列中的最大和 #差分 #贪心 题目链接 题意 给定整数数组nums,以及查询数组requests,其中requests[i] = [starti, endi] .第i个查询求 num ...
- C++stl简单使用
1 //1.sort函数排序 2 /* 3 #include <iostream> 4 #include <algorithm> 5 using namespace std; ...