扫码关注官方订阅号
我想实现一个像手机联系人的一个的列表。并且通过首字母来分组。 请问如何用vue 里面的v-for 来渲染?
{{item.LETTER}} {{index}} {{item.NAME}}
小伙看你根骨奇佳,潜力无限,来学PHP伐。
Vue 1.0 直接使用OrderBy进行首字母排序
< v-for="(item,index) in carbrands | orderBy 'LETTER'"> // 数组第一个显示LETTER以及现在的数组元素中的Letter!= 上一个数组元素中的Letter时显示Letter。 v-show="index === 0 || item.LETTER !== carbrands[index-1].LETTER"
Vue 2.0 使用计算属性
< v-for="(item,index) in carbrands"> v-show="index === 0 || item.LETTER !== carbrands[index-1].LETTER" computed: { carbrands: function () { return _.orderBy(this.carbrands, 'LETTER'); } }
温馨建议:提问的时候直接贴代码出来方便别人复制粘贴修改,你贴图片很不方便
同菜鸟... 我的想法是构建下面这样的数组, 然后在模版中遍历就行. 等待更好的解决方案
[{ letter: 'A', children: [{},{}] },{ letter: 'B', children: [{},{}] }]
先把数据按字母升序排列,然后按以下思路输出。
v-show里面的条件改一下:carbrands[index].LETTER !== carbrands[index-1].LETTER不知道符合不符合你的要求
微信扫码关注PHP中文网服务号
QQ扫码加入技术交流群
Copyright 2014-2025 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号
PHP学习
技术支持
返回顶部
Vue 1.0 直接使用OrderBy进行首字母排序
Vue 2.0 使用计算属性
温馨建议:提问的时候直接贴代码出来方便别人复制粘贴修改,你贴图片很不方便
同菜鸟... 我的想法是构建下面这样的数组, 然后在模版中遍历就行. 等待更好的解决方案
先把数据按字母升序排列,然后按以下思路输出。
v-show里面的条件改一下:carbrands[index].LETTER !== carbrands[index-1].LETTER
不知道符合不符合你的要求