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

Question

我知道在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的内置连接方法:

{{ list.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

我最终做的是:

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

在CSS中:

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

Answer 4

您可以使用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>

Answer 5

解决方案使用"模板"

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

Answer 6

最好使用这样的内置JS Array.join方法

<span>{{ list.join(', ') }}</span>