Vue - 检查你是否在 v-for 循环的最后一个道具上 [英] Vue - check if you are on the last prop of a v-for loop

问题描述

如果我有以下数据属性:

If I have the following data property:

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 可能是解决方案，但无法弄清楚如何使其发挥作用.

with an extra comma on the end, how can I have it detect that it's the last prop and not show the comma? I thoughta v-show or v-if may be the solution but can't quite figure out how to make it work.

推荐答案

这是一种方法.

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

这篇关于Vue - 检查你是否在 v-for 循环的最后一个道具上的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！