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

L西里2020-03-12

我知道在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>

这可能吗？

米亚十三Harry2020/03/12 15:52:46

使用“模板”的解决方案

 <template v-for="(element, index) in list">
   <span>{{element}}</span><template v-if="index + 1 < list.length">, </template>
 </template>

L西里2020/03/12 15:52:46

我最终要做的是：

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

在CSS中：

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

Newest Answer