V-for 在 1 行中，中间有一些东西答案

【问题标题】：V-for in 1 line with something in betweenV-for 在 1 行中，中间有一些东西
【发布时间】：2020-12-22 18:46:24
【问题描述】：

我正在尝试在 1 行中显示一个带有 v-for 的数组，但我想在每个单词之间添加“，”。唯一的问题是当我这样做时，它也会以“，”结尾。有什么建议吗？

【问题讨论】：

显示模板代码
考虑在create JS 中的逗号分隔列表而不是模板中创建一个计算属性。

【解决方案1】：

.join() 用指定的 "glue" 连接字符串（在这种情况下为comma + space）：

new Vue({
  el: '#app',
  data: () => ({ 
    items: ['apple', 'banana', 'cherry']
  }),
  computed: {
    displayItems() {
      return this.items.join(', ');
    }
  }
})

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<div id="app">
  Items: {{ displayItems }}
</div>

有人甚至会争辩说，鉴于这是一个非常简单的案例，您不应该为 computed 烦恼：

new Vue({
  el: '#app',
  data: () => ({ 
    items: ['apple', 'banana', 'cherry']
  })
})

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<div id="app">
  Items: {{ items.join(', ') }}
</div>

如果真的要使用标签，可以使用 CSS 伪元素解决问题：

new Vue({
  el: '#app',
  data: () => ({ 
    items: ['apple', 'banana', 'cherry']
  })
})

#app > span:after {
  content: ', '
}
#app > span:last-child:after {
  content: none
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<div id="app">
  Items: <span v-for="(item, key) in items" :key="key" v-text="item"/>
</div>

【讨论】：

更好的方法，但不使用v-for
@dvilla，我也为v-for 添加了解决方案。但是，如果这些标签的唯一目的是遍历数组，我强烈建议不要使用标签。性能的首要规则之一是：尽可能减少 DOM 元素的数量。

【解决方案2】：

将逗号放在<template> 中并检查它是否是最后一项

<template>
  <div>
    <span v-for="(item, index) of items" :key="i">
      {{item}}<template v-if="index !== items.length - 1">,</template>
    </span>
  </div>
</template>

<script>
  export default {
    data() {
      return {
        items: ['test A', 'test B', 'test C']
      }
    }
  }
</script>

【讨论】：