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

Question

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

在 vue.js 中是否有针对此问题的简单解决方案？

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

或者在FreeMarker templates you can use quite fancy things with lists我喜欢用，例如

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

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

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

Answer 1

对于字符串数组，您可以这样做：

 <span v-if="users && users.length > 0">
   <template v-for="(user, index) in users">
     <template v-if="index < users.length - 1">
       {{ user }},
     </template>
     <template v-else>
       {{ user }}
     </template>
   </template>
 </span>
 <p v-else>
   No users
 </p>

"iterate over the properties of an object" 是什么意思？

Answer 2

您可以使用计算的属性和 return 常规 JS 版本，然后您根本不需要 v-for。如果您想要或需要在模板中执行逻辑，这可能是更好的方法。这是 fiddle

模板：

<div id="app">
  <h2>Users:</h2>
  <span>
    {{ listUsers }}
  </span>
</div>

JS:

new Vue({
  el: "#app",
  data: {
    users: [
      'Jim',
      'John',
      'Sarah',
      'Steve'
    ]
  },
  computed: {
    listUsers() {
        return this.users.join(', ')
    }
  }
})

编辑：

如果您想遍历对象属性，您也可以在计算的属性中使用 Object.keys，并将属性映射到数组，然后按常规方式加入。

这是 fiddle

模板：

<div id="app">
  <span>
    {{ listProps }}
  </span>
</div>

JS:

new Vue({
  el: "#app",
  data: {
    user: {
      name: 'Dwight',
      age: 32,
      animal: 'Bears',
      food: 'Beets',
      show: 'Battlestar Galactica'      
    }
  },
  computed: {
    listProps() {
      return Object.keys(this.user).map(key => `${key}: ${this.user[key]}`).join(", ");
    }
  }
})

Answer 3

是的。它需要使用 <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 的 `<#sep>`）

Is there a way in Vue.js to generate a separator when using v-for (similar to `Array.join()` FreeMarker's `<#sep>`)

javascript

freemarker

vue.js

v-for