我知道在 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>
这可能吗？
【问题讨论】：
您可以使用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>【讨论】：
.length有什么问题？
.length 可能是o(n) 复杂性。见this related question
您可以使用conditional rendering 隐藏最后一个,，如下所示：
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>【讨论】：
.length，方法是与0比较，并反转文本和命令的位置。见stackoverflow.com/a/42129590/6320039
我最终做的是：
<span v-for="element in list" class="item">
<span>{{ element }}</span>
</span>
在 CSS 中：
.item + .item:before {
content: ", ";
}
【讨论】：
.join(', ')。因为它使逗号坚持每个项目的最后一个字母，并且因为它不添加额外的逗号。这就是“优雅”。
如果你想用 JS 的方式来做，你可以做一个计算属性；你甚至可以继续 span 方法。
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>
</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>
【讨论】：
如果你只关心逗号分隔，请使用 Javascript 内置的join 方法：
{{ list.join(', ') }}
【讨论】：
只是添加另一个我更喜欢使用的替代方案：
<span v-for="(item, index) in list">
{{ item }}{{ (index+1 < list.length) ? ', ' : '' }}
</span>
【讨论】：
我可以建议使用 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>
或
<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>
【讨论】：
最好使用像这样的内置 JS Array.join 方法
<span>{{ list.join(', ') }}</span>
【讨论】：
可能的样本<span v-for="(item,i) in items">
{{(item !='' && i !=0) ? ',' : ''}} {{item.title}}
</span>
【讨论】：
在不同的视图中，使用:after 或:before 带有逗号并不是一个好主意，因为在调整窗口大小时浏览器不将其作为字符串处理。
如果我们尝试在每次迭代中使用条件运算符来检查它是第一个还是最后一个元素，如果我们有大量项目，这将是一个开销。每当我们进行更改检测时，也会重新评估条件。
为了克服这两个问题，我们可以将逗号括在一个单独的元素中，并使用 CSS :last-child 选择器将其隐藏
<template v-for="item in list">
<span class="item">
{{item}}
<span class="comma">
,
</span>
</span>
</template>
在 CSS 中
.item:last-child .comma {
display: none;
}
【讨论】：
如果您确实想要控制 dom 的外观（例如，实际上想要实现您询问的 dom 结构），您可以像这样创建 functional component：
<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>
你会像这样使用这个组件：
<template>
<RenderList :list="['alice', 'bob', 'chuck']" />
</template>
【讨论】：