当前位置: 首页 > 知识库问答 >
问题:

我可以让一个属性在 vue v-for 中只出现一次吗

阎坚成
2023-03-14

我有很多人和相关团队。我想显示记录中的所有人,但我只想显示他们的队名一次。

这意味着,如果 v-for 循环遇到了这个特定的团队名称,它应该把它放在一个新的临时数组中,以表示它应该是唯一的,然后当它再次遇到该团队名称时,通过该临时数组检查它并防止它再次显示。

示例 HTML 代码:

<div id="a-list">
     <div v-for="person in people">{{person.Name}}, {{person.Team}}</div>
</div>

示例Vue代码:

var crew = new Vue({
el: "#a-list",
data: {
people:
  [ { "Name": "Richard","Team":"DMS"}, { "Name": "Mark","Team":"VV"}, { "Name": "Steve","Team":"VV"}, {"Name":"Koji","Team":"MZ"}, {"Name":"Jamie","Team":"VV"} ]
  }
});

预期输出:

Richard, DMS
Mark, VV
Steve, 
Koji, MZ
Jaimie,

这是否可以直接从 v-for 循环而不是在 JS 文件中完成?

已编辑以显示更多非顺序数据

更新:正如 Fabio 所指出的,除非团队的顺序首先在输出中按顺序排列,否则上述场景没有多大意义。所以他的回答是正确的。

共有1个答案

乌靖
2023-03-14

这可能是一个解决方案:

<div id="a-list">
    <div v-for="(person,index) in people"> {{person.Name}}, {{ ((index == 0) || person.Team != people[index-1].Team) ? person.Team : '' }}</div>
</div>
 类似资料:
  • 问题内容: 看看我的“ file.properties”: 为什么当我得到“ key2”的值时,我的结果是“ $ {key1} Martin!”。不像“我叫马丁!” => 我使用Java 6编程=>我使用java.util.Properties 问题答案: 您可能需要查看Apache配置, http://commons.apache.org/configuration/ 它支持的许多功能包括变量插

  • 问题内容: 查看mozilla文档,查看正则表达式示例(标题为“使用匹配结果创建数组”),我们有如下语句: 输入:一个只读属性,它反映与正则表达式匹配的原始字符串。 index:只读属性,它是字符串中匹配项的从零开始的索引。 等等…是否可以在JavaScript中创建具有只读属性的对象,或者这是对特定浏览器实现的内置类型的特权? 问题答案: 编辑: 自从编写了此答案以来,EcmaScript 5中

  • 一、题目 在字符串中找出第一个只出现一次的字符。 二、解题思路 第一种:直接求解: 从头开始扫描这个字符串中的每个字符。当访问到某字符时拿这个字符和后面的每个字符相比较,如果在后面没有发现重复的字符,则该字符就是只出现一次的字符。如果字符串有n个字符,每个字符可能与后面的O(n)个字符相比较,因此这种思路的时间复杂度是O(n^2)。 第二种:记录法 由于题目与字符出现的次数相关, 我们是不是可以统

  • #include <stdio.h> #include <stdlib.h> #include <sys/types.h> #include <unistd.h> int main(void) { pid_t pid; int i = 0; for (i = 0; i < 2; i++) { pid = fork(); if (p

  • NowCoder 题目描述 在一个字符串中找到第一个只出现一次的字符,并返回它的位置。 // Input: abacc Output: b 解题思路 最直观的解法是使用 HashMap 对出现次数进行统计,但是考虑到要统计的字符范围有限,因此可以使用整型数组代替 HashMap,从而将空间复杂度由 O(N) 降低为 O(1)。 // java public int FirstNotRepeat

  • 遵循Joshua Bloch的《有效的Java》中使用的风格,并与这个问题的答案一致,我过去在Java SE环境中使用AssertionErrors来表示不应该执行的代码路径。 看看JavaEE,EJB3.1规范说 如果bean方法遇到系统异常或错误,它应该简单地将错误从bean方法传播到容器(即,bean方法不必捕获异常)。 再往下一点,它说在非应用程序异常的情况下必须丢弃相关的EJB实例。据我