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

Что я в итоге сделал г вместо этого:

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

И в CSS:

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

Answer 2

Вы могли бы сделать это с помощью v-if атрибут:

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

Вот рабочая ручка: https://codepen.io/anon/pen/EZdNNZ

Answer 3

Вы можете использовать conditional rendering, чтобы скрыть последнюю , как следующее:

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 4

Если вы хотите сделать это так, как JS, вы можете просто сделать вычисляемый собственности; вы даже можете продолжить метод span.

computed { 
    listCommaSeparated() { return this.list.join(', '); }, 
    listCommaSpans() { return '<span>' + this.list.join('</span><span>') + '</span>'; }, 
}, 

Это определенно было бы предпочтительным способом с точки зрения рендеринга.

Answer 5

Решение с помощью «шаблон»

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