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

vue.js Vue.js

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>

这可能吗？

第1096篇《VueJS：如何输出逗号分隔的数组？》来自Winter(https://github.com/aiyld/aiyld.github.io)的站点

共2个回答

米亚十三Harry 2020.03.12

使用“模板”的解决方案

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

L西里 2020.03.12

我最终要做的是：

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

在CSS中：

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

相似问题

0 回答

0 回答

5 回答

25 回答

0 回答

0 回答

问题类别

JavaScript Ckeditor Python Webpack TypeScript Vue.js React.js ExpressJS KoaJS CSS Node.js HTML Django 单元测试 PHP Asp.net jQuery Bootstrap IOS Android