[Vue]避免 v-if 和 v-for 用在同一个元素上
一般我们在两种常见的情况下会倾向于这样做:
情形1:为了过滤一个列表中的项目 (比如 v-for="user in users" v-if="user.isActive"
)。在这种情形下,请将 users
替换为一个计算属性 (比如 activeUsers
),让其返回过滤后的列表。
情形2:为了避免渲染本应该被隐藏的列表 (比如 v-for="user in users" v-if="shouldShowUsers"
)。这种情形下,请将 v-if
移动至容器元素上 (比如 ul
, ol
)。
情形1
当 Vue 处理指令时,v-for
比 v-if
具有更高的优先级,所以这个模板:
<ul>
<li
v-for="user in users"
v-if="user.isActive"
:key="user.id"
>
{{ user.name }}
</li>
</ul>
将会经过如下运算:
this.users.map(function (user) {
if (user.isActive) {
return user.name
}
})
因此哪怕我们只渲染出一小部分用户的元素,也得在每次重渲染的时候遍历整个列表,不论活跃用户是否发生了变化。
通过将其更换为在如下的一个计算属性上遍历:
computed: {
activeUsers: function () {
return this.users.filter(function (user) {
return user.isActive
})
}
}
<ul>
<li
v-for="user in activeUsers"
:key="user.id"
>
{{ user.name }}
</li>
</ul>
我们将会获得如下好处:
- 过滤后的列表只会在
users
数组发生相关变化时才被重新运算,过滤更高效。 - 使用
v-for="user in activeUsers"
之后,我们在渲染的时候只遍历活跃用户,渲染更高效。 - 解藕渲染层的逻辑,可维护性 (对逻辑的更改和扩展) 更强。
- 过滤后的列表只会在
情形2
为了获得同样的好处,我们也可以把:
<ul>
<li
v-for="user in users"
v-if="shouldShowUsers"
:key="user.id"
>
{{ user.name }}
</li>
</ul>
更新为:
<ul v-if="shouldShowUsers">
<li
v-for="user in users"
:key="user.id"
>
{{ user.name }}
</li>
</ul>
通过将 v-if
移动到容器元素,我们不会再对列表中的每个用户检查 shouldShowUsers
。取而代之的是,我们只检查它一次,且不会在 shouldShowUsers
为否的时候运算 v-for
。
[Vue]避免 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: ...
随机推荐
- g 定时任务
Package cron implements a cron spec parser and job runner. cron - GoDochttps://godoc.org/github.com/ ...
- SQL-W3School-函数:SQL FIRST() 函数
ylbtech-SQL-W3School-函数:SQL FIRST() 函数 1.返回顶部 1. FIRST() 函数 FIRST() 函数返回指定的字段中第一个记录的值. 提示:可使用 ORDER ...
- 终极解决办法rvct Cannot obtain license for Compiler (feature compiler) with license version >= 3.1
参考:https://blog.csdn.net/nic_r/article/details/7458038 ARM C/C++ Compiler, RVCT4. [Build ] armcc : e ...
- Mysql字段修饰符(约束)
(1).null和not null not null不可以插入null,但可以插入空值. 数值型.字符型.日期型都可以插入null,但只有字符型可以插入空值. 使用方法如下: mysql> cr ...
- PAT 甲级 1058 A+B in Hogwarts (20 分) (简单题)
1058 A+B in Hogwarts (20 分) If you are a fan of Harry Potter, you would know the world of magic ha ...
- Oracle中查询当前时间、时间格式化方法
Oracle中如何获取系统当前时间 select to_char(sysdate,'yyyy-mm-dd hh24:mi:ss') from dual; ORACLE里获取一个时间的年.季.月.周. ...
- 【Leetcode_easy】599. Minimum Index Sum of Two Lists
problem 599. Minimum Index Sum of Two Lists 题意:给出两个字符串数组,找到坐标位置之和最小的相同的字符串. 计算两个的坐标之和,如果与最小坐标和sum相同, ...
- 多林环境中的ADFS
公司有两个或更多Active Directory林,但是只有一个ADFS,如何让ADFS支持多个域林呢?(一个ADFS只能部署在一个域中,不能跨域) 答案是:在部署ADFS的林和所有其他林之间建立双向 ...
- linux一行命令查杀进程
https://blog.csdn.net/primeprime/article/details/52415273 ps -efww | grep -w 'helloworld' | grep -v ...
- WordPress的Bootstrap面包屑导航
<ol class="breadcrumb"> 当前位置: <li><a href="<?php bloginfo('url'); ? ...