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

这是一种方式。

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

Answer 2

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

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

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

Answer 5

可惜 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: ',';
}

Answer 6

如果要在代码中而不是在Stack Overflow上存储有关此模式的知识，可以创建如下组件：

$ cat file.txt
Hello, how are you?
$ sed -r "s/^.+(how.+)$/\1/" file.txt
how are you?
$

这不一定会使代码缩短，但更容易记住：

<template>
  <span v-if="show"><slot></slot></span>
</template>
<script>
  export default {
    name: 'separator',
    props: ['items', 'index'],
    computed: {
      show () {
        return this.index !== (Array.isArray(this.items) ? this.items : Object.keys(this.items)).length - 1
      }
    }
  }
</script>

Answer 7

这也可以。

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

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

7 个答案: