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 可能是解决方案，但无法完全弄清楚如何使其工作。

原文由 Mankind1023 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

这是一种方法。

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

原文由 Bert 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 2

如果您正在循环遍历数组而不是对象，这是一个解决方案：

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

原文由 Abhishek kushwaha 发布，翻译遵循 CC BY-SA 4.0 许可协议