javascript - vue.js v-for 分组渲染
本文介绍了javascript - vue.js v-for 分组渲染的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!
问题描述
问 题
我想实现一个像手机联系人的一个的列表。并且通过首字母来分组。 请问如何用vue 里面的v-for 来渲染?
HTML模板
<li v-for="(item,index) in carbrands">
<h2 class="list-title" v-show="" >{{item.LETTER}} {{index}}</h2>
<ul class="list-content">
<li class="list-car-item" @click="typeShow"><img :src="item.IMAGE" alt=""><span>{{item.NAME}}</span></li>
</ul>
</li>
数据
通过data里的LETTER 想实现的效果
我是菜鸟 ,请指教。
解决方案
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');
}
}
温馨建议:提问的时候直接贴代码出来方便别人复制粘贴修改,你贴图片很不方便
这篇关于javascript - vue.js v-for 分组渲染的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!
查看全文