|
|
相关文章推荐
|
狂野的松树 · Python使用ElementTree处理X ...· 1 月前 · |
|
|
英姿勃勃的山羊 · 解析 xml 文件 - xml.etree ...· 1 月前 · |
|
|
满身肌肉的领带 · jsoup HTML Parsing ...· 1 月前 · |
|
|
体贴的松树 · js全屏，监听页面是否全屏_js监听全屏事件· 1 月前 · |
|
|
一身肌肉的泡面 · 【海棠推文】《【快穿】和漂亮NPC一见钟情之 ...· 1 年前 · |
|
|
失眠的烤红薯 · 奉俊昊电影大盘点-虎嗅网· 1 年前 · |
|
|
胆小的煎饼果子 · 南京大学获得国家科学技术进步奖一等奖―高校科 ...· 1 年前 · |
|
|
强悍的鸵鸟 · 一起来睡个好觉吧漫画免费 - ...· 1 年前 · |
我知道在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>这个是可能的吗？
12 个回答
高票数
最新
Stack Overflow用户
回答于2017-02-09 14:27
得票数
40
您可以使用
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>
Stack Overflow用户
回答于2017-02-09 14:58
已采纳
得票数
19
我最终做的是：
<span v-for="element in list" class="item">
<span>{{ element }}</span>
</span>在CSS中：
.item + .item:before {
content: ", ";
}
Stack Overflow用户
修改于2017-06-30 00:30
得票数
3
如果你想用JS的方式来做，你可以只做一个计算属性；你甚至可以继续使用span方法。
computed {
listCommaSeparated () { return this.list.join(', '); },
listCommaSpans () { return '<span>' + this.list.join('</span><span>') + '</span>'; },
},从渲染性能的角度来看，这绝对是首选的方式。
Stack Overflow用户
回答于2017-10-02 19:41
得票数
8
使用“模板”的解决方案
<template v-for="(element, index) in list">
<span>{{element}}</span><template v-if="index + 1 < list.length">, </template>
</template>
Stack Overflow用户
回答于2018-06-05 07:03
得票数
1
我的组件：
<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>
Stack Overflow用户
回答于2018-06-18 21:31
得票数
52
如果你只关心逗号分隔，使用Javascript内置的 join 方法：
{{ list.join(', ') }}
Stack Overflow用户
回答于2018-06-21 05:58
得票数
3
只是添加了另一个我更喜欢使用的替代方案：
<span v-for="(item, index) in list">
{{ item }}{{ (index+1 < list.length) ? ', ' : '' }}
</span>
Stack Overflow用户
修改于2018-06-24 07:22
得票数
0
我可以建议使用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>
Stack Overflow用户
回答于2018-08-19 16:46
得票数
14
最好使用内置的JS
Array.join
方法，如下所示
<span>{{ list.join(', ') }}</span>
Stack Overflow用户
回答于2018-10-14 03:53
得票数
1
它可能的样本
<span v-for="(item,i) in items"> {{(item !='' && i !=0) ? ',' : ''}} {{item.title}} </span>
Stack Overflow用户
回答于2020-04-14 03:03
得票数
0
在不同的视图中，如果浏览器在调整窗口大小时不将逗号作为字符串处理，则使用
: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;
}
Stack Overflow用户
修改于2021-07-31 16:05
得票数
1
如果您确实想要控制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 ? ", " : "",