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

梅猿2020-03-12

如果我具有以下数据属性：

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可能是解决方案，但还不太清楚如何使它工作。

Gil伽罗2020/03/12 11:12:56

很棒的作品

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

达蒙小小2020/03/12 11:12:56

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

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

2020/03/12 11:12:56

您可以使用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/

猪猪十三2020/03/12 11:12:56

这是一种方法。

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

Newest Answer