vue.js v-for 分组渲染

Question

我想实现一个像手机联系人的一个的列表。并且通过首字母来分组。 请问如何用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 想实现的效果

我是菜鸟 ，请指教。

Answer 1

Vue 1.0 直接使用OrderBy进行首字母排序< v-for="(item,index) in carbrands | orderBy 'LETTER'">&nbsp;// 数组第一个显示LETTER以及现在的数组元素中的Letter!= 上一个数组元素中的Letter时显示Letter。v-show="index === 0 || item.LETTER !== carbrands[index-1].LETTER"Vue 2.0 使用计算属性< v-for="(item,index) in carbrands">&nbsp;v-show="index === 0 || item.LETTER !== carbrands[index-1].LETTER"&nbsp;computed: {&nbsp; carbrands: function () {&nbsp; &nbsp; return _.orderBy(this.carbrands, 'LETTER');&nbsp;&nbsp;&nbsp; }}温馨建议：提问的时候直接贴代码出来方便别人复制粘贴修改，你贴图片很不方便