我有一个看起来像这样的联系人列表：
contacts = [{ name: 'Albert' }, { name:'Bernard' }, { name: 'Bob'}, { name: 'Robert' }];
考虑到联系人已经按字母顺序排列，您将如何在按字母分类的列表中显示每个联系人，如下所示：
一种
乙
[R
在我的模板中，我知道如何显示我的联系人
<template v-for="contact in contacts">
<li>{{ contact.name }}</li>
<template>
但是我不知道如何对信件进行分类
谢谢你的帮助
我会使用像库lodash和计算属性：
import _ from 'lodash'
export default {
data () {
return {
contacts: [{ name: 'Albert' }, { name:'Bernard' }, { name: 'Bob'}, { name: 'Robert' }]
}
},
computed: {
grouped () {
return _.groupBy(this.contacts, (item) => {
return item.name.charAt(0)
})
}
}
}
然后在模板中：
<div v-for="(value, key) in grouped">
<h2>{{ key }}</h2>
<ul>
<li v-for="contact in value">{{ contact.name }}</li>
</ul>
</div>
本文收集自互联网，转载请注明来源。
如有侵权，请联系 [email protected] 删除。
我来说两句