Vue.js 中有没有办法在使用 v-for 时生成分隔符（类似于 `Array.join()` FreeMarker 的 `<#sep>`）

Question

使用 vue.js 和 v-for 我想生成一个<span>由“,”分隔的元素列表。

在 vue.js 中有一个简单的解决方案吗？

在 JavaScript 中，我会做一个users.join(", ").

<#list users as user>
  <span>
    ${user}<#sep>, </#sep>
  </span>
<#else>
  <p>No users</p>
</#list>

在 vue 中我还没有发现类似的东西。（嗯，else当然可以使用 v-if 和 v-else 来完成 -part。）我错过了什么吗？

或者什么是替代解决方案？我正在考虑使用模板，如果这不是最后一个索引，则通过将当前索引与数组长度进行比较来生成分隔符。但是，如果我遍历对象的属性，这将不起作用。

Answer 1

是的。它需要使用<template>元素作为无标签容器和index列表中的属性。

<div>
  <template v-for="(user, index) in users">
    <template v-if="index > 0">,</template>
    <span>{{user}}</span>
  </template>
</div>

Vue.js 中有没有办法在使用 v-for 时生成分隔符（类似于 `Array.join()` FreeMarker 的 `&lt;#sep&gt;`）