首页
学习
活动
专区
工具
TVP
发布
社区首页 >问答首页 >VueJS:如何输出逗号分隔的数组?

VueJS:如何输出逗号分隔的数组?
EN

Stack Overflow用户
提问于 2017-02-09 14:16:46
回答 12查看 39.3K关注 0票数 42

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

代码语言:javascript
复制
<span v-for="(element, index) in list">{{ element }}</span>

但是如果我想要一个逗号分隔的列表呢?例如,如果为list = ["alice", "bob", "chuck"],则上面的代码将输出:

代码语言:javascript
复制
<span>alice</span><span>bob</span><span>chuck</span>

不过,我想要的是:

代码语言:javascript
复制
<span>alice</span>, <span>bob</span>, <span>chuck</span>

这个是可能的吗?

EN

回答 12

Stack Overflow用户

回答已采纳

发布于 2017-02-09 14:58:01

我最终做的是:

代码语言:javascript
复制
<span v-for="element in list" class="item">
  <span>{{ element }}</span>
</span>

在CSS中:

代码语言:javascript
复制
.item + .item:before {
  content: ", ";
}
票数 19
EN

Stack Overflow用户

发布于 2018-06-18 21:31:05

如果你只关心逗号分隔,使用Javascript内置的join方法:

代码语言:javascript
复制
{{ list.join(', ') }}
票数 52
EN

Stack Overflow用户

发布于 2017-02-09 14:27:39

您可以使用conditional rendering来隐藏最后一个,,如下所示:

代码语言:javascript
复制
var demo = new Vue({
  el: '#demo',
  data: function() {
    return {
      lists: ['Vue', 'Angular', 'React']
    };
  }
})
代码语言:javascript
复制
<script src="https://vuejs.org/js/vue.min.js"></script>
<div id="demo">
  <span v-for="(list, index) in lists">
    <span>{{list}}</span><span v-if="index+1 < lists.length">, </span>
  </span>
</div>

票数 40
EN
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接:

https://stackoverflow.com/questions/42129534

复制
相关文章

相似问题

领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档