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

link之家

链接快照平台

输入网页链接，自动生成快照
标签化管理网页链接

相关文章推荐

想表白的仙人掌 · postgres，把指定的几个表的 ...· 3 月前 ·

爱旅游的跑步鞋 · 一文读懂TS的(.d.ts)文件 - 掘金· 1 年前 ·

细心的豌豆 · 微信小程序点击切换样式的功能实现 - 知乎· 1 年前 ·

鬼畜的椰子 · HTML和CSS中，如何让子元素不继承父元素 ...· 1 年前 ·

开朗的烤土司 · opencv 图像增强_OpenCV ...· 1 年前 ·

腾讯云

开发者社区

文档意见反馈控制台

首页 TVP

文章/答案/技术大牛

发布

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

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

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

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>

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

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

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

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

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

{{ list.join(', ') }}

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

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

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

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

.item:last-child .comma {
    display: none;
}

<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 ? ", " : "",

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

12 个回答