blocks|key|4375330|text|我最终做的是：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|4375331|<span+v-for="element+in+list"+class="item">
++<span>{{+element+}}</span>
</span>|code-block|syntax|javascript|4375332|在CSS中：|4375333|.item+%2B+.item:before+{
++content:+",+";
}|4375334|entityMap^0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|M|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|N|8|@]|9|@]|A|$E|F]]|$1|G|3|H|5|6|7|O|8|@]|9|@]|A|$]]|$1|I|3|J|5|D|7|P|8|@]|9|@]|A|$E|F]]|$1|K|3|-4|5|6|7|Q|8|@]|9|@]|A|$]]]|L|$]]

<p>What I ended up doing instead was:</p>

<pre><code>&lt;span v-for="element in list" class="item"&gt;
  &lt;span&gt;{{ element }}&lt;/span&gt;
&lt;/span&gt;
</code></pre>

<p>And in CSS:</p>

<pre><code>.item + .item:before {
  content: ", ";
}
</code></pre>


blocks|key|4374940|text|如果你只关心逗号分隔，使用Javascript内置的join方法：|type|unstyled|depth|inlineStyleRanges|entityRanges|offset|length|data|4374941|{{+list.join(',+')+}}|code-block|syntax|javascript|4374942|entityMap|0|LINK|mutability|MUTABLE|url|https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/join^0|Q|4|0|0|0^^$0|@$1|2|3|4|5|6|7|Q|8|@]|9|@$A|R|B|S|1|T]]|C|$]]|$1|D|3|E|5|F|7|U|8|@]|9|@]|C|$G|H]]|$1|I|3|-4|5|6|7|V|8|@]|9|@]|C|$]]]|J|$K|$5|L|M|N|C|$O|P]]]]

<p>If all you care about is comma separation, use Javascript's built-in <a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/join" rel="noreferrer">join</a> method:</p>

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


blocks|key|4375309|text|您可以使用conditional+rendering来隐藏最后一个,，如下所示：|type|unstyled|depth|inlineStyleRanges|offset|length|style|CODE|entityRanges|data|4375310|var+demo+=+new+Vue({
++el:+'#demo',
++data:+function()+{
++++return+{
++++++lists:+['Vue',+'Angular',+'React']
++++};
++}
})|code-block|syntax|javascript|4375311|<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%2B1+<+lists.length">,+</span>
++</span>
</div>|4375312|​|4375313|entityMap|0|LINK|mutability|MUTABLE|url|https://vuejs.org/v2/guide/conditional.html#ad^0|X|1|5|L|0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|W|8|@$9|X|A|Y|B|C]]|D|@$9|Z|A|10|1|11]]|E|$]]|$1|F|3|G|5|H|7|12|8|@]|D|@]|E|$I|J]]|$1|K|3|L|5|H|7|13|8|@]|D|@]|E|$I|J]]|$1|M|3|N|5|6|7|14|8|@]|D|@]|E|$]]|$1|O|3|-4|5|6|7|15|8|@]|D|@]|E|$]]]|P|$Q|$5|R|S|T|E|$U|V]]]]

<p>You can use <a href="https://vuejs.org/v2/guide/conditional.html#ad" rel="noreferrer">conditional rendering</a> to hide last <code>,</code> like following:
<div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
<div class="snippet-code">
<pre class="snippet-code-js lang-js prettyprint-override"><code>var demo = new Vue({
  el: '#demo',
  data: function() {
    return {
      lists: ['Vue', 'Angular', 'React']
    };
  }
})</code></pre>
<pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;script src="https://vuejs.org/js/vue.min.js"&gt;&lt;/script&gt;
&lt;div id="demo"&gt;
  &lt;span v-for="(list, index) in lists"&gt;
    &lt;span&gt;{{list}}&lt;/span&gt;&lt;span v-if="index+1 &lt; lists.length"&gt;, &lt;/span&gt;
  &lt;/span&gt;
&lt;/div&gt;</code></pre>
</div>
</div>
</p>


blocks|key|4375067|text|最好使用内置的JS+Array.join方法，如下所示|type|unstyled|depth|inlineStyleRanges|offset|length|style|CODE|entityRanges|data|4375068|<span>{{+list.join(',+')+}}</span>|code-block|syntax|javascript|4375069|entityMap^0|A|A|0|0^^$0|@$1|2|3|4|5|6|7|M|8|@$9|N|A|O|B|C]]|D|@]|E|$]]|$1|F|3|G|5|H|7|P|8|@]|D|@]|E|$I|J]]|$1|K|3|-4|5|6|7|Q|8|@]|D|@]|E|$]]]|L|$]]

<p>Better to use builtin JS <code>Array.join</code> method like this</p>

<pre><code>&lt;span&gt;{{ list.join(', ') }}&lt;/span&gt;
</code></pre>


blocks|key|4375373|text|使用“模板”的解决方案|type|unstyled|depth|inlineStyleRanges|entityRanges|data|4375374|+<template+v-for="(element,+index)+in+list">
+++<span>{{element}}</span><template+v-if="index+%2B+1+<+list.length">,+</template>
+</template>|code-block|syntax|javascript|4375375|entityMap^0|0|0^^$0|@$1|2|3|4|5|6|7|I|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|J|8|@]|9|@]|A|$E|F]]|$1|G|3|-4|5|6|7|K|8|@]|9|@]|A|$]]]|H|$]]

<p>Solution using "template"</p>

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


blocks|key|4374890|text|如果你想用JS的方式来做，你可以只做一个计算属性；你甚至可以继续使用span方法。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|4374891|computed+{
++listCommaSeparated+()+{+return+this.list.join(',+');+},
++listCommaSpans+()+{+return+'<span>'+%2B+this.list.join('</span><span>')+%2B+'</span>';+},
},|code-block|syntax|javascript|4374892|从渲染性能的角度来看，这绝对是首选的方式。|4374893|entityMap^0|0|0|0^^$0|@$1|2|3|4|5|6|7|K|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|L|8|@]|9|@]|A|$E|F]]|$1|G|3|H|5|6|7|M|8|@]|9|@]|A|$]]|$1|I|3|-4|5|6|7|N|8|@]|9|@]|A|$]]]|J|$]]

<p>If you wanted to do it the JS way, you can just do a computed property; you could even continue the span method.</p>

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

<p>This would definitely be the preferred way from a rendering performance standpoint.</p>


blocks|key|4374981|text|只是添加了另一个我更喜欢使用的替代方案：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|4374982|<span+v-for="(item,+index)+in+list">
++++{{+item+}}{{+(index%2B1+<+list.length)+?+',+'+:+''+}}
</span>|code-block|syntax|javascript|4374983|entityMap^0|0|0^^$0|@$1|2|3|4|5|6|7|I|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|J|8|@]|9|@]|A|$E|F]]|$1|G|3|-4|5|6|7|K|8|@]|9|@]|A|$]]]|H|$]]

<p>Just adding another alternative which I prefer to use:</p>

<pre><code>&lt;span v-for="(item, index) in list"&gt;
    {{ item }}{{ (index+1 &lt; list.length) ? ', ' : '' }}
&lt;/span&gt;
</code></pre>


blocks|key|4375382|text|我的组件：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|4375383|<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>|code-block|syntax|javascript|4375384|entityMap^0|0|0^^$0|@$1|2|3|4|5|6|7|I|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|J|8|@]|9|@]|A|$E|F]]|$1|G|3|-4|5|6|7|K|8|@]|9|@]|A|$]]]|H|$]]

<p>My component:</p>

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


blocks|key|4375556|text|它可能的样本|type|unstyled|depth|inlineStyleRanges|entityRanges|data|4375557|<span+v-for="(item,i)+in+items">+++++{{(item+!=''+&&+i+!=0)+?+','+:+''}}+{{item.title}}++++++</span>|offset|length|style|CODE|4375558|entityMap^0|0|0|2S|0^^$0|@$1|2|3|4|5|6|7|J|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|K|8|@$D|L|E|M|F|G]]|9|@]|A|$]]|$1|H|3|-4|5|6|7|N|8|@]|9|@]|A|$]]]|I|$]]

<p>Its possible sample<br>
    <code>&lt;span v-for="(item,i) in items"&gt;
    {{(item !='' &amp;&amp; i !=0) ? ',' : ''}} {{item.title}} 
    &lt;/span&gt;</code></p>


blocks|key|4375238|text|如果您确实想要控制dom的外观(例如，实际上想要实现您询问的dom结构)，您可以像这样创建一个functional+component：|type|unstyled|depth|inlineStyleRanges|entityRanges|offset|length|data|4375239|<script>
//+RenderList.vue
export+default+{
++functional:+true,
++render(createElement,+context)+{
++++//+Read+the+list+of+entries+by+accessing+the+prop+"list"
++++const+listEntries+=+context.props.list;

++++//+Return+a+custom+list+of+elements+for+each+list+entry.
++++//+Only+return+a+`,`+if+it's+not+the+last+entry.
++++return+listEntries.map((listElement,+idx)+=>+{
++++++return+[
++++++++createElement("span",+listElement),
++++++++idx+<+listEntries.length+-+1+?+",+"+:+"",
++++++];
++++});
++},
};
</script>|code-block|syntax|javascript|4375240|您可以像这样使用此组件：|4375241|<template>
++<RenderList+:list="['alice',+'bob',+'chuck']"+/>
</template>|4375242|entityMap|0|LINK|mutability|MUTABLE|url|https://vuejs.org/v2/guide/render-function.html#Functional-Components^0|1B|K|0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|U|8|@]|9|@$A|V|B|W|1|X]]|C|$]]|$1|D|3|E|5|F|7|Y|8|@]|9|@]|C|$G|H]]|$1|I|3|J|5|6|7|Z|8|@]|9|@]|C|$]]|$1|K|3|L|5|F|7|10|8|@]|9|@]|C|$G|H]]|$1|M|3|-4|5|6|7|11|8|@]|9|@]|C|$]]]|N|$O|$5|P|Q|R|C|$S|T]]]]

<p>If you do want control over how the dom looks (e.g. actually want to achieve the dom structure that you asked about), you can create a <a href="https://vuejs.org/v2/guide/render-function.html#Functional-Components" rel="nofollow noreferrer">functional component</a> like so:</p>
<pre class="lang-js prettyprint-override"><code>&lt;script&gt;
// RenderList.vue
export default {
  functional: true,
  render(createElement, context) {
    // Read the list of entries by accessing the prop &quot;list&quot;
    const listEntries = context.props.list;

    // Return a custom list of elements for each list entry.
    // Only return a `,` if it's not the last entry.
    return listEntries.map((listElement, idx) =&gt; {
      return [
        createElement(&quot;span&quot;, listElement),
        idx &lt; listEntries.length - 1 ? &quot;, &quot; : &quot;&quot;,
      ];
    });
  },
};
&lt;/script&gt;
</code></pre>
<p>You would use this component like so:</p>
<pre class="lang-js prettyprint-override"><code>&lt;template&gt;
  &lt;RenderList :list=&quot;['alice', 'bob', 'chuck']&quot; /&gt;
&lt;/template&gt;
</code></pre>


blocks|key|4375008|text|我可以建议使用i>0作为检查吗？|type|unstyled|depth|inlineStyleRanges|entityRanges|data|4375009|我已经包装了分隔符，以便{{‘’}}可以用于只有一个空格，并避免span被视为空。|4375010|<span
++++v-for="(item,+i)+in+list"
++++:key="i">
+++<span+v-if="i>0">{{+',+'+}}</span>
+++<span+class="text-nowrap">{{+item+}}</span>
</span>|code-block|syntax|javascript|4375011|或|4375012|<span
++++v-for="(item,+i)+in+list"
++++:key="i">
+++
+++<span>{{+(i+>+0+?+',+'+:+'')+}}</span>
+++<span+class="text-nowrap">{{+item+}}</span>
</span>|4375013|entityMap^0|0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|O|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|P|8|@]|9|@]|A|$]]|$1|D|3|E|5|F|7|Q|8|@]|9|@]|A|$G|H]]|$1|I|3|J|5|6|7|R|8|@]|9|@]|A|$]]|$1|K|3|L|5|F|7|S|8|@]|9|@]|A|$G|H]]|$1|M|3|-4|5|6|7|T|8|@]|9|@]|A|$]]]|N|$]]

<p>May I suggest using i > 0 as check?</p>

<p>I've wrapped the separator so that {{ ' ' }} can be used for just having a space and avoiding span treated as being empty.</p>

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

<p>or</p>

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


blocks|key|4375179|text|在不同的视图中，如果浏览器在调整窗口大小时不将逗号作为字符串处理，则使用:after或:before不是一个好主意。|type|unstyled|depth|inlineStyleRanges|offset|length|style|CODE|entityRanges|data|4375180|如果我们试图在每次迭代中使用条件运算符来检查它是第一个元素还是最后一个元素，如果我们有大量的项目，这将是一种开销。此外，每当我们检测到更改时，都会重新评估条件。|4375181|为了克服这两个问题，我们可以将逗号包含在一个单独的元素中，并使用CSS+:last-child选择器将其隐藏为|4375182|<template+v-for="item+in+list">
++++<span+class="item">
++++++++{{item}}
++++++++<span+class="comma">
++++++++++++,
++++++++</span>
++++</span>
</template>|code-block|syntax|javascript|4375183|在CSS中|4375184|.item:last-child+.comma+{
++++display:+none;
}|4375185|entityMap^0|10|6|17|7|0|0|10|B|0|0|0|0^^$0|@$1|2|3|4|5|6|7|U|8|@$9|V|A|W|B|C]|$9|X|A|Y|B|C]]|D|@]|E|$]]|$1|F|3|G|5|6|7|Z|8|@]|D|@]|E|$]]|$1|H|3|I|5|6|7|10|8|@$9|11|A|12|B|C]]|D|@]|E|$]]|$1|J|3|K|5|L|7|13|8|@]|D|@]|E|$M|N]]|$1|O|3|P|5|6|7|14|8|@]|D|@]|E|$]]|$1|Q|3|R|5|L|7|15|8|@]|D|@]|E|$M|N]]|$1|S|3|-4|5|6|7|16|8|@]|D|@]|E|$]]]|T|$]]

<p>There are different views where using <code>:after</code> or <code>:before</code> to have a comma is not a good idea with respect to browser not handling it as a string when the window is resized.</p>

<p>If we try to use conditional operator in each iteration to check whether it is the first or the last element, it would be an overhead if we have large number of items. Also the conditions will be re-evaluated whenever we have change detection.</p>

<p>To overcome these 2 things, we can enclose the comma in a separate element and hide it using CSS <code>:last-child</code> selector as</p>

<pre><code>&lt;template v-for="item in list"&gt;
    &lt;span class="item"&gt;
        {{item}}
        &lt;span class="comma"&gt;
            ,
        &lt;/span&gt;
    &lt;/span&gt;
&lt;/template&gt;
</code></pre>

<p>and in CSS</p>

<pre><code>.item:last-child .comma {
    display: none;
}
</code></pre>


<p>I know that in VueJS I can loop through an array:</p>

<pre><code>&lt;span v-for="(element, index) in list"&gt;{{ element }}&lt;/span&gt;
</code></pre>

<p>But what if I wanted a list that is comma separated? For example, if <code>list = ["alice", "bob", "chuck"]</code>, then the above would output:</p>

<pre><code>&lt;span&gt;alice&lt;/span&gt;&lt;span&gt;bob&lt;/span&gt;&lt;span&gt;chuck&lt;/span&gt;
</code></pre>

<p>What I want, though, is:</p>

<pre><code>&lt;span&gt;alice&lt;/span&gt;, &lt;span&gt;bob&lt;/span&gt;, &lt;span&gt;chuck&lt;/span&gt;
</code></pre>

<p>Is this possible?</p>


VueJS: How to output a comma separated array?

我知道在VueJS中我可以遍历一个数组：<span v-for="(element, index) in list">{{ element }}</span>但是如果我想要一个逗号分隔的列表呢？例如，如果为list = ["alice", "bob", "chuck"]，则上面的代码将输出：<span>alice</span><span>bob</span><span>chuck</span>不过

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

回答 12

Stack Overflow用户

Stack Overflow用户

Stack Overflow用户

社区

活动

资源

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

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

回答 12

Stack Overflow用户

Stack Overflow用户

Stack Overflow用户

社区

活动

资源

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

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