Vue - 检查你是否在v-for循环的最后一个道具上

Question

如果我有以下数据属性:

person: {name: 'Joe', age: 35, department: 'IT'}

并希望循环并输出如下:

name: Joe, age: 35, department: IT

到目前为止,我有:

<span v-for="(val, key) in person">{{key}}: {{val}}, </span>

但是这显示:

name: Joe, age: 35, department: IT,

最后用一个额外的逗号,我怎么能检测到它是最后一个道具并且不显示逗号？我虽然v-show或v-if可能是解决方案,但无法弄清楚如何使其工作.

Answer 1

您还可以通过在每个项目前插入逗号来“作弊”，因为检查第一项 ( key !== 0) 会更容易。

<span v-for="(val, key) in person">
  <span v-if="key !== 0">, </span>
  {{key}}: {{val}}
</span>

这个解决方案应该有效，但不同意 TetraDev 的观点。该解决方案根本不显示第一个条目的 , 。但它确实显示了前面带有逗号的所有其他条目。很好又简单的解决方案。 (5认同)
这并没有解决获取数组中“最后”项的目标。它只获得“非第一个”项目。 (2认同)
我什至不认为这是作弊:) (2认同)
如果您无法轻松确定 .length，则效果很好。 (2认同)

Answer 2

这是一种方式.

<span v-for="(val,key,index) of person">key: {{key}}, val: {{val}}<span v-if="index != Object.keys(person).length - 1">, </span></span>

Answer 3

很棒的作品

<div id="app">
  <div v-for="(item, index) in items">
    <div v-if="index == items.length - 1">yes</div>
    {{ item }}, {{ index }}
  </div>
</div>

Answer 4

您可以使用a computed来查看当前索引(第三个参数v-if)是否是最后一个属性:

computed: {
  last(){
     return Object.keys(this.person).length-1;
  }
}

然后在你的v-for:

<span v-for="(val, key, index) in person">{{key}}: {{val}}<span v-if="index !== last">, </span> </span>

这是JSFiddle:https://jsfiddle.net/wv2ujxvn/

Answer 5

这也有效。

<span v-for="(value,key) in persons" :key='key'>
    {{key}}: {{val}} 
    <span v-if="key+1 != persons.length">, </span>
</span>

Answer 6

遗憾的是Vue没有提供快捷方式。

我个人更喜欢使用小型 CSS：

<div class="list">
  <span>Item 1</span>
  <span>Item 2</span>
  <span>Item 3</span>
</div>

.list span:not(:last-child)::after {
  content: ',';
}