VueJS：如何输出逗号分隔的数组？

Question

我知道在 VueJS 中我可以遍历一个数组：

 <span v-for="(element, index) in list">{{ element }}</span>

但是，如果我想要一个逗号分隔的列表怎么办？例如，如果 list = ["alice", "bob", "chuck"] ，那么上面将输出：

 <span>alice</span><span>bob</span><span>chuck</span>

不过，我想要的是：

 <span>alice</span>, <span>bob</span>, <span>chuck</span>

这可能吗？

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

Answer 1

我最终做的是：

 <span v-for="element in list" class="item">
  <span>{{ element }}</span>
</span>

在 CSS 中：

 .item + .item:before {
  content: ", ";
}

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

Answer 2

如果您只关心逗号分隔，请使用 Javascript 的内置 join 方法：

 {{ list.join(', ') }}

对于对象数组，您可以执行以下操作：

 {{ list.map(entry => entry.title).join(', ') }}

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