原文地址


永远不要把 v-if 和 v-for 同时用在同一个元素上。

一般我们在两种常见的情况下会倾向于这样做:

  • 为了过滤一个列表中的项目 (比如 v-for="user in users" v-if="user.isActive")。在这种情形下,请将 users替换为一个计算属性 (比如 activeUsers),让其返回过滤后的列表。

  • 为了避免渲染本应该被隐藏的列表 (比如 v-for="user in users" v-if="shouldShowUsers")。这种情形下,请将 v-if 移动至容器元素上 (比如 ulol)。

详解

当 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" 之后,我们在渲染的时候遍历活跃用户,渲染更高效。
  • 解藕渲染层的逻辑,可维护性 (对逻辑的更改和扩展) 更强。

为了获得同样的好处,我们也可以把:

<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

反例

<ul>
<li
v-for="user in users"
v-if="user.isActive"
:key="user.id"
>
{{ user.name }}
</li>
</ul>
<ul>
<li
v-for="user in users"
v-if="shouldShowUsers"
:key="user.id"
>
{{ user.name }}
</li>
</ul>

好例子

<ul>
<li
v-for="user in activeUsers"
: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-for与v-if的优先级的更多相关文章

  1. Oracle基本数据字典:v$database、v$instance、v$version、dba_objects

    v$database: 视图结构: SQL> desc v$database; Name                                      Null?    Type - ...

  2. POJ2762 Going from u to v or from v to u(单连通 缩点)

    判断图是否单连通,先用强连通分图处理,再拓扑排序,需注意: 符合要求的不一定是链拓扑排序列结果唯一,即在队列中的元素始终只有一个 #include<cstdio> #include< ...

  3. 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 ...

  4. 临时文件相关的v$tempfile v$sort_usage与V$tempseg_usage

    SQL> select username,user,segtype,segfile#,segblk#,extents,segrfno# from v$sort_usage; SEGFILE#代表 ...

  5. [强连通分量] 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 ...

  6. POJ2762 Going from u to v or from v to u?(判定单连通图:强连通分量+缩点+拓扑排序)

    这道题要判断一张有向图是否是单连通图,即图中是否任意两点u和v都存在u到v或v到u的路径. 方法是,找出图中所有强连通分量,强连通分量上的点肯定也是满足单连通性的,然后对强连通分量进行缩点,缩点后就变 ...

  7. poj 2762 Going from u to v or from v to u?

    题目描述:为了让他们的儿子变得更勇敢些,Jiajia和Wind将他们带到一个大洞穴中.洞穴中有n个房间,有一些单向的通道连接某些房间.每次,Wind选择两个房间x和y,要求他们的一个儿子从一个房间走到 ...

  8. 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. ...

  9. 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:  ...

  10. POJ 2762 Going from u to v or from v to u?(强联通 + TopSort)

    题目大意: 为了锻炼自己的儿子 Jiajia 和Wind 把自己的儿子带入到一个洞穴内,洞穴有n个房间,洞穴的道路是单向的. 每一次Wind 选择两个房间  x 和 y,   让他的儿子从一个房间走到 ...

随机推荐

  1. C# 核心基础(1) 持续更新

    using System; namespace ConsoleApplicationCShape { class Program { static void Main(string[] args) { ...

  2. 入门 uCOS 操作系统的一点建议

    原创: 鱼鹰Osprey  鱼鹰谈单片机 3月2日 预计阅读时间: 4 分钟 对于想入门操作系统的读者,我的建议是先学 uCOS II.原因有以下几点: 1.最为重要的原因是网上相关资源非常丰富,这对 ...

  3. 《Redis 设计与实现》读书笔记(三)

    多机数据库实现 十五 .复制 从服务器通过命令 slaveof 127.0.0.1 6000 成为主服务器的从服务器.然后执行复制操作,保持自己的状态和主服务器一样 1.理论 同步 成为从服务器后的同 ...

  4. Elasticsearch: Index template

    Index template定义在创建新index时可以自动应用的settings和mappings. Elasticsearch根据与index名称匹配的index模式将模板应用于新索引.这个对于我 ...

  5. zabbix添加监控项以及常用的键值

      zabbix自身提供了丰富的监控项,下面以“cpu空闲值”为例介绍zabbix如何添加新的监控项 1.创建主机群组 配置——主机群组——创建主机群组 2.创建主机 配置——主机——创建主机 3.添 ...

  6. Codeforces Round #456 (Div. 2) 912D D. Fishes

    题: OvO http://codeforces.com/contest/912/problem/D 解: 枚举每一条鱼,每放一条鱼,必然放到最优的位置,而最优位置即使钓上的概率最大的位置,即最多的r ...

  7. filter(expr|obj|ele|fn)筛选出与指定表达式匹配的元素集合。

    filter(expr|obj|ele|fn) 概述 筛选出与指定表达式匹配的元素集合. 这个方法用于缩小匹配的范围.用逗号分隔多个表达式 参数 exprStringV1.0 字符串值,包含供匹配当前 ...

  8. 001_C/C++笔试题_考察C/C++语言基础概念

    (一)文章来自:C/C++笔试题-主要考察C/C++语言基础概念.算法及编程,附参考答案 (二)基础概念 2. 头文件中的ifndef/define/endif的作用? 答:防止该头文件被重复引用. ...

  9. 洛谷P4698 [CEOI2011]Hotel [贪心,二分,并查集]

    题目传送门 Hotel 题目描述 你经营着一家旅馆,这家旅馆有 n 个房间,每个房间有维护费用和容量.其中第 i 个房间的维护费用为 ci​,容量为 pi​ 人. 现在有 m 个订单,每个订单有两个参 ...

  10. jQuery属性操作之DOM属性操作

    DOM属性操作是对DOM元素的属性进行读取.设置和移除操作, 比如prop(). removeProp(). 1. prop() 1.1 使用prop()获取返回值 prop() 用于返回属性值时, ...