如果你是在一个循环的最后一个道具 Vue 检查

如果我有以下数据属性:

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 可能是解决方案但是不知道怎么才能成功。

82244 次浏览
小开
最佳答案

有一个办法。

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

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

小开

如果您希望在代码中而不是在 Stack Overflow 中存储关于此模式的知识，您可以创建一个如下组件:

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

这并不一定会使代码变短，但更容易记住:

<span v-for="(val, key, index) of person">key: \{\{key}}, val: \{\{val}}
<separator :items="person" :index="index">, </separator>
</span>
小开

如果你是通过数组而不是对象进行循环，这里有一个解决方案:

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

这也行得通:

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

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

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

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

提交答案