Vue.js VueJS：如何输出逗号分隔的数组？

我知道，在VueJS中，我可以在阵列中循环：

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

不过，我想要的是：

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

爱丽丝，鲍勃，恰克

---

这可能吗？

您可以使用在第一个参数上带有条件的

v-if

属性来执行此操作，避免使用

.length

：

var-app=新的Vue({
el:“#应用程序”，
数据：{
清单：[“约翰”、“弗雷德”、“哈利”]
}
})

，{{element}}

您可以使用隐藏最后一个

，

如下所示：

var demo=新的Vue({
el:'演示'，
数据：函数（）{
返回{
列表：['Vue'，'Angular'，'React']
};
}
})

{{list}}，

我最终做的是：

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

---

如果你想用JS的方式，你可以只做一个计算属性；您甚至可以继续使用span方法

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

计算{
listCommaSeparated（）{返回this.list.join（'，'）；}，
listCommaSpans（）{return''+this.list.join（'''++'；}，
},

从渲染性能的角度来看，这无疑是首选的方法。

使用“模板”的解决方案

{{element}}，

我的组件：

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

{{item}

保险商实验室{
列表样式：无；
}
李{
显示：内联块；
}
李：不是（：最后一个孩子）：：之后{
内容：“，”；
}
导出默认值{
道具：['model']
};

如果您只关心逗号分隔，请使用Javascript的内置方法：

---

只是添加了另一个我更喜欢使用的选项：

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

{{item}}{（index+1

我可以建议使用I>0作为支票吗

我已经包装了分隔符，这样{{'}}就可以用于只拥有一个空格，并避免span被视为空

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

{{ ', ' }}
{{item}}

或

{{（i>0？'，'：''）}
{{item}}

最好使用内置JS

数组。像这样加入方法

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

{{list.join（'，'）}
其可能的示例


{{（item！='&&i！=0）？，'：'}}{{item.title}}
在不同的视图中，使用
:after
或
:before
添加逗号不是一个好主意，因为浏览器在调整窗口大小时不将其作为字符串处理

如果我们尝试在每次迭代中使用条件运算符来检查它是第一个元素还是最后一个元素，那么如果我们有大量的项，这将是一项开销。此外，每当我们进行变更检测时，将重新评估条件

为了克服这两个问题，我们可以将逗号括在单独的元素中，并使用CSS
：last child
选择器将其隐藏为

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

此解决方案非常优雅，但换行行为不好。当你调整浏览器的大小时，逗号可以转到最后一个单词的下一行。我做了非常类似的事情。逗号列表>li:not（：last child）：{content:，“}之后不是一个好的解决方案，也会干扰屏幕阅读器，阻止浏览器正确处理文本（高级字体功能、换行符等）。不要滥用CSS来完成这些任务。@PauloCheque，我想知道你为什么称之为“优雅”。对我来说，因为它把逗号和元素分开了，所以它完全错了。我相信这里的优雅解决方案是
。join（'，'）
。因为它使逗号与每个项目的最后一个字母保持一致，并且没有添加额外的逗号。这就是“优雅”，这是一个很好的解决方案。我能够将其用于1级阵列。我确实需要为对象数组找到另一种选择。这正是我想要的，因为我需要在select标记中找到它。{{role.roleName}{{role.accesspermissions.join（'，'）}}通过与0进行比较，并反转文本和命令的位置，可以避免使用
.length
。看这其实是最好的答案，效果完美，谢谢！我很想知道为什么被否决的选民投了否决票。因此，我可以改进这个答案。并且知道下次如何做得更好。使用
.length
有什么问题？性能可能会受到影响，因为
.length
可能是
o（n）
复杂性。看，我相信这个答案是。的重复。如果你在迭代过程中需要做其他事情，就不起作用，只针对普通字符串。
<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;
}