VueJS: Wie wird ein kommagetrenntes Array ausgegeben?

Question

Ich weiß, in VueJS, dass ich kann Schleife durch ein Array:

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

Aber was, wenn ich eine Liste wollte, die durch Komma getrennt wird? Zum Beispiel, wenn list = ["alice", "bob", "chuck"], dann ist die oben ausgeben würde:

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

Was ich will, aber ist:

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

dies möglich ist?

Answer 1

Was ich gelandet habe g stattdessen war:

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

Und in CSS:

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

Answer 2

Man könnte es ein v-if Attribut tun mit:

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

Hier ist ein Arbeits Pen: https://codepen.io/anon/pen/EZdNNZ

Answer 3

Sie können conditional rendering verwenden letzte , wie folgt zu verstecken:

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

Wenn Sie den JS Weg machen wollte, können Sie einfach eine berechnete Eigenschaft zu tun; Sie könnten sogar die Span-Methode fortsetzen.

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

Dies wäre definitiv der bevorzugte Weg von einem Rendering-Performance-Standpunkt.

Answer 5

Solution "template"

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