VueJS:如何输出逗号分隔的数组? [英] VueJS: How to output a comma separated array?

问题描述

我知道在 VueJS 中我可以遍历数组:

I know that in VueJS I can loop through an array:

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

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

But what if I wanted a list that is comma separated? For example, if list = ["alice", "bob", "chuck"], then the above would output:

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

不过，我想要的是:

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

这可能吗?

推荐答案

我最终做的是:

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

在 CSS 中:

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

这篇关于VueJS:如何输出逗号分隔的数组?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！