Question

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

2017-02-09

53226

vue.js vuejs2

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

这可能吗？

Answer 1

如果您只关心逗号分隔，请使用 Javascript 内置的 join 方法：

{{ list.join(', ') }}

对于对象数组，您可以执行以下操作：

{{ list.map(entry => entry.title).join(', ') }}

Answer 2

var demo = new Vue({
  el: '#demo',
  data: function() {
    return {
      lists: ['Vue', 'Angular', 'React']
    };
  }
})

<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>

Answer 3

您可以使用 v-if 属性对第一个参数设置条件来实现此目的， 避免使用 .length ：

var app = new Vue({
  el: '#app',
  data: {
    list: ['john', 'fred', 'harry']
  }
})

<script src="https://vuejs.org/js/vue.min.js"></script><div id="app">
  <span v-for="(element, index) in list">
    <span v-if="index != 0">, </span><span>{{ element }}</span>
  </span>
</div>