web-dev-qa-db-ja.com

VueJS：コンマ区切りの配列を出力する方法は？

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>

これは可能ですか？

vue.jsvuejs2
20
Ben

代わりに私がやったことは：

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

CSSで：

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

条件付きレンダリング を使用して、最後の,次のように：

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

コンマ区切りだけが必要な場合は、Javascriptの組み込みの join メソッドを使用します。

{{ list.join(', ') }}
22
René Roth

「テンプレート」を使用したソリューション

 <template v-for="(element, index) in list">
   <span>{{element}}</span><template v-if="index + 1 < list.length">, </template>
 </template>
8
Дмитрий Алфёров

最初の引数を条件とする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>
6
Ulysse BN

組み込みのJSを使用するほうがよいArray.joinこのようなメソッド

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

JSの方法で実行したい場合は、計算されたプロパティを実行するだけです。 spanメソッドを継続することもできます。

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

これは、レンダリングパフォーマンスの観点から間違いなく推奨される方法です。

3
Jody.LeBlanc

私が使用したい別の選択肢を追加するだけです：

<span v-for="(item, index) in list">
    {{ item }}{{ (index+1 < list.length) ? ', ' : '' }}
</span>
1
Gene Parcellano

チェックとしてi> 0を使用することをお勧めしますか？

{{''}}を使用してスペースを空け、スパンが空として扱われないようにするために、セパレーターをラップしました。

<span
    v-for="(item, i) in list"
    :key="i">
   <span v-if="i>0">{{ ', ' }}</span>
   <span class="text-nowrap">{{ item }}</span>
</span>

または

<span
    v-for="(item, i) in list"
    :key="i">
   <!-- if not wrapped in a span will leave a space before the comma -->
   <span>{{ (i > 0 ? ', ' : '') }}</span>
   <span class="text-nowrap">{{ item }}</span>
</span>
0
Antony Gibbs

その可能なサンプル
<span v-for="(item,i) in items"> {{(item !='' && i !=0) ? ',' : ''}} {{item.title}} </span>

0
Rajilesh Panoli

私のコンポーネント：

<template>
<ul v-if="model.length">
    <li v-for="item in model">{{item}}</li>
</ul>
</template>
<style scoped>
ul {
    list-style: none;
}
li {
    display: inline-block;
}
li:not(:last-child)::after {
    content: ", ";
}
</style>
<script>
export default {
    props: ['model']
};
</script>
0
nclu