VueJS: Jak wypisać tablicę rozdzielaną przecinkami?

Question

Wiem, że w VueJS mogę pętli tablicy:

<span v-for="(element, index) in list">{{ element }}</span> 

Ale co zrobić, jeśli chciałam listę, która jest oddzielone przecinkami? Na przykład, jeśli list = ["alice", "bob", "chuck"], to powyższe byłoby wyjście:

<span>alice</span><span>bob</span><span>chuck</span> 

Co chcę, choć brzmi:

<span>alice</span>, <span>bob</span>, <span>chuck</span> 

Czy to możliwe?

Answer 1

Co znalazłem doin g zamiast było:

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

A w CSS:

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

Answer 2

Można to zrobić za pomocą v-if atrybut:

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

Oto Pen pracy: https://codepen.io/anon/pen/EZdNNZ

Answer 3

Można użyć conditional rendering ukryć ostatnią , jak następuje:

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

Jeśli chciał zrobić to tak, JS, można po prostu zrobić właściwość komputerowej; możesz nawet kontynuować metodę span.

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

To zdecydowanie byłby preferowany sposób z punktu widzenia wydajności renderowania.

Answer 5

Rozwiązanie za pomocą „szablon”

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