vue实现类似于按字母排序通讯录的数据对接?

Question

如下图,需要实现这样的效果:

后台返回数据如下图:

[{"Guid":"b7ab7746-1a56-42ac-970e-39fcc92a4a72","Name":"宝马","Logo":"http://qchsc.jshcn.cn/ImgUpload/20180528144514223.png","WebSite":"http://www.mercedes-benz.com.cn/content/china/mpc/mpc_china_website/zhng/home_mpc/passengercars.html","OrderID":"1","Keywords":"B","IsShow":"1","Remark":"我uauocidfweoi 披萨回程票 破我安神补脑从","Description":"我uawshfoiucuijkhbjkhbouhblkjsdnc卡是吧都此女卡就好看计划吧 客家话","CreateUser":"admin","CreateTime":"2017/11/4 16:28:08","ModifyUser":"admin","ModifyTime":"2018/5/28 15:03:53","IsDeleted":"0","IsDownLoad":"0","IsRecommend":"1","CategoryLevel":"1","FatherID":"00000000-0000-0000-0000-000000000000","rownum":"4"},{"Guid":"4b3fed7b-0f1a-480d-bf3a-c50047639a85","Name":"长安汽车","Logo":"http://qchsc.jshcn.cn/ImgUpload/20171024172629832.jpg","WebSite":"http://vw.faw-vw.com/zh/cn.html","OrderID":"2","Keywords":"C","IsShow":"1","Remark":"哦爱很惨欧尼奥斯好吃的玻璃爱上传播排水槽","Description":"搜的哈佛哦is的哈佛哦你说的话公司电话欧委会的","CreateUser":"admin","CreateTime":"2017/11/4 16:29:10","ModifyUser":"admin","ModifyTime":"2017/11/6 10:33:00","IsDeleted":"0","IsDownLoad":"0","IsRecommend":"1","CategoryLevel":"1","FatherID":"00000000-0000-0000-0000-000000000000","rownum":"6"},{"Guid":"d151138d-d6ed-4a2a-90c8-cb2960ae942c","Name":"阿斯顿·马丁","Logo":"http://qchsc.jshcn.cn/ImgUpload/20180511093109286.png","WebSite":"","OrderID":"4","Keywords":"A","IsShow":"1","Remark":"as casd","Description":"wqaecweq","CreateUser":"admin","CreateTime":"2017/11/6 10:27:42","ModifyUser":"admin","ModifyTime":"2018/5/11 9:31:27","IsDeleted":"0","IsDownLoad":"0","IsRecommend":"1","CategoryLevel":"1","FatherID":"00000000-0000-0000-0000-000000000000","rownum":"2"},{"Guid":"8a23fa31-5c26-42b0-b590-87e311957b6b","Name":"奔驰","Logo":"http://qchsc.jshcn.cn/ImgUpload/20171024172526163.jpg","WebSite":"","OrderID":"5","Keywords":"B","IsShow":"1","Remark":"wevc","Description":"wevcwe","CreateUser":"admin","CreateTime":"2017/11/6 10:30:42","ModifyUser":"admin","ModifyTime":"2017/11/6 10:30:42","IsDeleted":"0","IsDownLoad":"0","IsRecommend":"1","CategoryLevel":"1","FatherID":"00000000-0000-0000-0000-000000000000","rownum":"5"},{"Guid":"3c8d59d5-0696-4043-a0a3-8e0b3d73a456","Name":"长城汽车","Logo":"http://qchsc.jshcn.cn/ImgUpload/20171024172526965.jpg","WebSite":"","OrderID":"6","Keywords":"C","IsShow":"1","Remark":"weaqs","Description":"qwcqwe","CreateUser":"admin","CreateTime":"2017/11/6 10:33:41","ModifyUser":"admin","ModifyTime":"2017/11/6 10:33:41","IsDeleted":"0","IsDownLoad":"0","IsRecommend":"1","CategoryLevel":"1","FatherID":"00000000-0000-0000-0000-000000000000","rownum":"7"},{"Guid":"1c666cfc-34e3-4c83-8ab3-89c6255ad825","Name":"大众","Logo":"http://qchsc.jshcn.cn/ImgUpload/20180511144838563.png","WebSite":"","OrderID":"7","Keywords":"D","IsShow":"1","Remark":"as","Description":"","CreateUser":"admin","CreateTime":"2017/11/6 10:34:25","ModifyUser":"admin","ModifyTime":"2018/5/11 14:48:48","IsDeleted":"0","IsDownLoad":"0","IsRecommend":"1","CategoryLevel":"1","FatherID":"00000000-0000-0000-0000-000000000000","rownum":"9"},{"Guid":"9ef78feb-62ed-4cfc-8e99-4e5fe9ddbdf8","Name":"丰田","Logo":"http://qchsc.jshcn.cn/ImgUpload/20171024165736550.jpg","WebSite":"","OrderID":"9","Keywords":"F","IsShow":"1","Remark":"","Description":"","CreateUser":"admin","CreateTime":"2017/11/6 10:35:42","ModifyUser":"admin","ModifyTime":"2017/11/6 10:35:42","IsDeleted":"0","IsDownLoad":"0","IsRecommend":"1","CategoryLevel":"1","FatherID":"00000000-0000-0000-0000-000000000000","rownum":"10"},{"Guid":"eba068fa-ff99-4ca7-b0e2-ee34c25e17aa","Name":"法拉利","Logo":"http://qchsc.jshcn.cn/ImgUpload/20171024172629112.jpg","WebSite":"","OrderID":"10","Keywords":"F","IsShow":"1","Remark":"","Description":"","CreateUser":"admin","CreateTime":"2017/11/6 10:36:15","ModifyUser":"admin","ModifyTime":"2017/11/6 10:36:15","IsDeleted":"0","IsDownLoad":"0","IsRecommend":"1","CategoryLevel":"1","FatherID":"00000000-0000-0000-0000-000000000000","rownum":"11"},{"Guid":"8a88d134-8bfa-4931-87e6-78db5a4c2374","Name":"广汽传祺","Logo":"http://qchsc.jshcn.cn/ImgUpload/20171024172526392.jpg","WebSite":"","OrderID":"11","Keywords":"G","IsShow":"1","Remark":"爱上成为请按时吃","Description":"按时查收","CreateUser":"admin","CreateTime":"2017/11/6 10:36:52","ModifyUser":"admin","ModifyTime":"2017/11/6 10:36:52","IsDeleted":"0","IsDownLoad":"0","IsRecommend":"1","CategoryLevel":"1","FatherID":"00000000-0000-0000-0000-000000000000","rownum":"12"},{"Guid":"32e724c8-9bbd-4876-9ce9-4f85d0f68f93","Name":"观致汽车","Logo":"http://qchsc.jshcn.cn/ImgUpload/20171024172629832.jpg","WebSite":"","OrderID":"12","Keywords":"G","IsShow":"1","Remark":"","Description":"","CreateUser":"admin","CreateTime":"2017/11/6 10:37:40","ModifyUser":"admin","ModifyTime":"2017/11/6 10:37:40","IsDeleted":"0","IsDownLoad":"0","IsRecommend":"1","CategoryLevel":"1","FatherID":"00000000-0000-0000-0000-000000000000","rownum":"13"},{"Guid":"07580503-3853-403f-b4dc-6bc9ed8c564a","Name":"哈佛汽车","Logo":"http://qchsc.jshcn.cn/ImgUpload/20171024172630457.jpg","WebSite":"","OrderID":"13","Keywords":"H","IsShow":"1","Remark":"qwcqw","Description":"","CreateUser":"admin","CreateTime":"2017/11/6 11:14:16","ModifyUser":"admin","ModifyTime":"2017/11/6 11:14:16","IsDeleted":"0","IsDownLoad":"0","IsRecommend":"1","CategoryLevel":"1","FatherID":"00000000-0000-0000-0000-000000000000","rownum":"14"},{"Guid":"523b128f-227c-49aa-8ec3-e608048aa737","Name":"海马汽车","Logo":"http://qchsc.jshcn.cn/ImgUpload/20171024165736594.jpg","WebSite":"","OrderID":"14","Keywords":"H","IsShow":"1","Remark":"szxv ;,knldkops njlovk,jzxb vkj","Description":"sdvsdv","CreateUser":"admin","CreateTime":"2017/11/6 11:14:42","ModifyUser":"admin","ModifyTime":"2017/11/6 11:14:42","IsDeleted":"0","IsDownLoad":"0","IsRecommend":"1","CategoryLevel":"1","FatherID":"00000000-0000-0000-0000-000000000000","rownum":"15"},{"Guid":"65568036-6d23-41ed-8d0b-213ea2ad883a","Name":"丰田","Logo":"http://qchsc.jshcn.cn","WebSite":"","OrderID":"15","Keywords":"","IsShow":"1","Remark":"","Description":"","CreateUser":"admin","CreateTime":"2017/11/25 10:30:38","ModifyUser":"admin","ModifyTime":"2017/11/25 10:30:38","IsDeleted":"0","IsDownLoad":"0","IsRecommend":"1","CategoryLevel":"1","FatherID":"00000000-0000-0000-0000-000000000000","rownum":"1"},{"Guid":"a2eca444-3470-460f-90a8-1b3870394a56","Name":"奥迪","Logo":"http://qchsc.jshcn.cn/ImgUpload/20180511092140696.png","WebSite":"","OrderID":"1000","Keywords":"A","IsShow":"1","Remark":"","Description":"","CreateUser":"admin","CreateTime":"2017/11/6 10:35:06","ModifyUser":"admin","ModifyTime":"2018/5/11 9:22:38","IsDeleted":"0","IsDownLoad":"0","IsRecommend":"1","CategoryLevel":"1","FatherID":"00000000-0000-0000-0000-000000000000","rownum":"3"},{"Guid":"381430d7-656c-4bb2-9f52-c05d4ca32023","Name":"长安","Logo":"http://qchsc.jshcn.cn","WebSite":"","OrderID":"1014","Keywords":"C","IsShow":"1","Remark":"","Description":"","CreateUser":"admin","CreateTime":"2018/6/11 11:35:43","ModifyUser":"admin","ModifyTime":"2018/6/11 11:35:43","IsDeleted":"0","IsDownLoad":"0","IsRecommend":"1","CategoryLevel":"1","FatherID":"00000000-0000-0000-0000-000000000000","rownum":"8"}]

想请教一下大家有没有比较高效简便的方法去绑定数据呢?目前我用的比较笨的方法去做但是感觉这样效率太低下了简直惨不忍睹又想不到什么比较方便的方法,我的方法如下:
我弄成了两个数组去绑数据判断
HTML:

<div class="hot_list sort_box fl" id="hot_list">
              <div class="sort_letter" v-for="(item,index) in Keywords " v-if="item == 'A'">{{item}}</div>
                        <div class="list_li clearfix sort_list bottom-line " @click="brandList2(index,item.Guid,item.Name)"
                        v-bind:class="{'active-sort-list':changeIndex===index}" v-for="(item,index) in list1 " v-if="item.Keywords == 'A'">
                            <img v-bind:src="item.Logo" class="fl" />
                            <div class="fl num_name t-size-14">{{item.Name}}</div>
                        </div>

                        <div class="sort_letter" v-for="(item,index) in Keywords " v-if="item == 'B'">B</div>
                        <div class="list_li clearfix sort_list bottom-line " @click="brandList2(index,item.Guid,item.Name)"
                        v-bind:class="{'active-sort-list':changeIndex===index}" v-for="(item,index) in list1 " v-if="item.Keywords == 'B'">
                            <img v-bind:src="item.Logo" class="fl" />
                            <div class="fl num_name t-size-14">{{item.Name}}</div>
                        </div>

                        <div class="sort_letter" v-for="(item,index) in Keywords " v-if="item == 'C'">C</div>
                        <div class="list_li clearfix sort_list bottom-line " @click="brandList2(index,item.Guid,item.Name)"
                        v-bind:class="{'active-sort-list':changeIndex===index}" v-for="(item,index) in list1 " v-if="item.Keywords == 'C'">
                            <img v-bind:src="item.Logo" class="fl" />
                            <div class="fl num_name t-size-14">{{item.Name}}</div>
                        </div>

                        <div class="sort_letter" v-for="(item,index) in Keywords " v-if="item == 'D'">D</div>
                        <div class="list_li clearfix sort_list bottom-line " @click="brandList2(index,item.Guid,item.Name)"
                        v-bind:class="{'active-sort-list':changeIndex===index}" v-for="(item,index) in list1 " v-if="item.Keywords == 'D'">
                            <img v-bind:src="item.Logo" class="fl" />
                            <div class="fl num_name t-size-14">{{item.Name}}</div>
                        </div>

                        <div class="sort_letter" v-for="(item,index) in Keywords " v-if="item == 'E'">E</div>
                        <div class="list_li clearfix sort_list bottom-line " @click="brandList2(index,item.Guid,item.Name)"
                        v-bind:class="{'active-sort-list':changeIndex===index}" v-for="(item,index) in list1 " v-if="item.Keywords == 'E'">
                            <img v-bind:src="item.Logo" class="fl" />
                            <div class="fl num_name t-size-14">{{item.Name}}</div>
                        </div>

                        <div class="sort_letter" v-for="(item,index) in Keywords " v-if="item == 'F'">F</div>
                        <div class="list_li clearfix sort_list bottom-line " @click="brandList2(index,item.Guid,item.Name)"
                        v-bind:class="{'active-sort-list':changeIndex===index}" v-for="(item,index) in list1 " v-if="item.Keywords == 'F'">
                            <img v-bind:src="item.Logo" class="fl" />
                            <div class="fl num_name t-size-14">{{item.Name}}</div>
                        </div>

                        <div class="sort_letter" v-for="(item,index) in Keywords " v-if="item == 'G'">G</div>
                        <div class="list_li clearfix sort_list bottom-line " @click="brandList2(index,item.Guid,item.Name)"
                        v-bind:class="{'active-sort-list':changeIndex===index}" v-for="(item,index) in list1 " v-if="item.Keywords == 'G'">
                            <img v-bind:src="item.Logo" class="fl" />
                            <div class="fl num_name t-size-14">{{item.Name}}</div>
                        </div>

                        <div class="sort_letter" v-for="(item,index) in Keywords " v-if="item == 'H'">H</div>
                        <div class="list_li clearfix sort_list bottom-line " @click="brandList2(index,item.Guid,item.Name)"
                        v-bind:class="{'active-sort-list':changeIndex===index}" v-for="(item,index) in list1 " v-if="item.Keywords == 'H'">
                            <img v-bind:src="item.Logo" class="fl" />
                            <div class="fl num_name t-size-14">{{item.Name}}</div>
                        </div>

                        <div class="sort_letter" v-for="(item,index) in Keywords " v-if="item == 'I'">I</div>
                        <div class="list_li clearfix sort_list bottom-line " @click="brandList2(index,item.Guid,item.Name)"
                        v-bind:class="{'active-sort-list':changeIndex===index}" v-for="(item,index) in list1 " v-if="item.Keywords == 'I'">
                            <img v-bind:src="item.Logo" class="fl" />
                            <div class="fl num_name t-size-14">{{item.Name}}</div>
                        </div>

                        <div class="sort_letter" v-for="(item,index) in Keywords " v-if="item == 'J'">J</div>
                        <div class="list_li clearfix sort_list bottom-line " @click="brandList2(index,item.Guid,item.Name)"
                        v-bind:class="{'active-sort-list':changeIndex===index}" v-for="(item,index) in list1 " v-if="item.Keywords == 'J'">
                            <img v-bind:src="item.Logo" class="fl" />
                            <div class="fl num_name t-size-14">{{item.Name}}</div>
                        </div>

                        <div class="sort_letter" v-for="(item,index) in Keywords " v-if="item == 'K'">K</div>
                        <div class="list_li clearfix sort_list bottom-line " @click="brandList2(index,item.Guid,item.Name)"
                        v-bind:class="{'active-sort-list':changeIndex===index}" v-for="(item,index) in list1 " v-if="item.Keywords == 'K'">
                            <img v-bind:src="item.Logo" class="fl" />
                            <div class="fl num_name t-size-14">{{item.Name}}</div>
                        </div>

                        <div class="sort_letter" v-for="(item,index) in Keywords " v-if="item == 'L'">L</div>
                        <div class="list_li clearfix sort_list bottom-line " @click="brandList2(index,item.Guid,item.Name)"
                        v-bind:class="{'active-sort-list':changeIndex===index}" v-for="(item,index) in list1 " v-if="item.Keywords == 'L'">
                            <img v-bind:src="item.Logo" class="fl" />
                            <div class="fl num_name t-size-14">{{item.Name}}</div>
                        </div>

                        <div class="sort_letter" v-for="(item,index) in Keywords " v-if="item == 'M'">M</div>
                        <div class="list_li clearfix sort_list bottom-line " @click="brandList2(index,item.Guid,item.Name)"
                        v-bind:class="{'active-sort-list':changeIndex===index}" v-for="(item,index) in list1 " v-if="item.Keywords == 'M'">
                            <img v-bind:src="item.Logo" class="fl" />
                            <div class="fl num_name t-size-14">{{item.Name}}</div>
                        </div>

                        <div class="sort_letter" v-for="(item,index) in Keywords " v-if="item == 'N'">N</div>
                        <div class="list_li clearfix sort_list bottom-line " @click="brandList2(index,item.Guid,item.Name)"
                        v-bind:class="{'active-sort-list':changeIndex===index}" v-for="(item,index) in list1 " v-if="item.Keywords == 'N'">
                            <img v-bind:src="item.Logo" class="fl" />
                            <div class="fl num_name t-size-14">{{item.Name}}</div>
                        </div>

                        <div class="sort_letter" v-for="(item,index) in Keywords " v-if="item == 'O'">O</div>
                        <div class="list_li clearfix sort_list bottom-line " @click="brandList2(index,item.Guid,item.Name)"
                        v-bind:class="{'active-sort-list':changeIndex===index}" v-for="(item,index) in list1 " v-if="item.Keywords == 'O'">
                            <img v-bind:src="item.Logo" class="fl" />
                            <div class="fl num_name t-size-14">{{item.Name}}</div>
                        </div>

                        <div class="sort_letter" v-for="(item,index) in Keywords " v-if="item == 'P'">P</div>
                        <div class="list_li clearfix sort_list bottom-line " @click="brandList2(index,item.Guid,item.Name)"
                        v-bind:class="{'active-sort-list':changeIndex===index}" v-for="(item,index) in list1 " v-if="item.Keywords == 'P'">
                            <img v-bind:src="item.Logo" class="fl" />
                            <div class="fl num_name t-size-14">{{item.Name}}</div>
                        </div>

                        <div class="sort_letter" v-for="(item,index) in Keywords " v-if="item == 'Q'">Q</div>
                        <div class="list_li clearfix sort_list bottom-line " @click="brandList2(index,item.Guid,item.Name)"
                        v-bind:class="{'active-sort-list':changeIndex===index}" v-for="(item,index) in list1 " v-if="item.Keywords == 'Q'">
                            <img v-bind:src="item.Logo" class="fl" />
                            <div class="fl num_name t-size-14">{{item.Name}}</div>
                        </div>

                        <div class="sort_letter" v-for="(item,index) in Keywords " v-if="item == 'R'">R</div>
                        <div class="list_li clearfix sort_list bottom-line " @click="brandList2(index,item.Guid,item.Name)"
                        v-bind:class="{'active-sort-list':changeIndex===index}" v-for="(item,index) in list1 " v-if="item.Keywords == 'R'">
                            <img v-bind:src="item.Logo" class="fl" />
                            <div class="fl num_name t-size-14">{{item.Name}}</div>
                        </div>

                        <div class="sort_letter" v-for="(item,index) in Keywords " v-if="item == 'S'">S</div>
                        <div class="list_li clearfix sort_list bottom-line " @click="brandList2(index,item.Guid,item.Name)"
                        v-bind:class="{'active-sort-list':changeIndex===index}" v-for="(item,index) in list1 " v-if="item.Keywords == 'S'">
                            <img v-bind:src="item.Logo" class="fl" />
                            <div class="fl num_name t-size-14">{{item.Name}}</div>
                        </div>

                        <div class="sort_letter" v-for="(item,index) in Keywords " v-if="item== 'T'">T</div>
                        <div class="list_li clearfix sort_list bottom-line " @click="brandList2(index,item.Guid,item.Name)"
                        v-bind:class="{'active-sort-list':changeIndex===index}" v-for="(item,index) in list1 " v-if="item.Keywords == 'T'">
                            <img v-bind:src="item.Logo" class="fl" />
                            <div class="fl num_name t-size-14">{{item.Name}}</div>
                        </div>

                        <div class="sort_letter" v-for="(item,index) in Keywords " v-if="item == 'U'">U</div>
                        <div class="list_li clearfix sort_list bottom-line " @click="brandList2(index,item.Guid,item.Name)"
                        v-bind:class="{'active-sort-list':changeIndex===index}" v-for="(item,index) in list1 " v-if="item.Keywords == 'U'">
                            <img v-bind:src="item.Logo" class="fl" />
                            <div class="fl num_name t-size-14">{{item.Name}}</div>
                        </div>

                        <div class="sort_letter" v-for="(item,index) in Keywords " v-if="item == 'V'">V</div>
                        <div class="list_li clearfix sort_list bottom-line " @click="brandList2(index,item.Guid,item.Name)"
                        v-bind:class="{'active-sort-list':changeIndex===index}" v-for="(item,index) in list1 " v-if="item.Keywords == 'V'">
                            <img v-bind:src="item.Logo" class="fl" />
                            <div class="fl num_name t-size-14">{{item.Name}}</div>
                        </div>

                        <div class="sort_letter" v-for="(item,index) in Keywords " v-if="item == 'W'">W</div>
                        <div class="list_li clearfix sort_list bottom-line " @click="brandList2(index,item.Guid,item.Name)"
                        v-bind:class="{'active-sort-list':changeIndex===index}" v-for="(item,index) in list1 " v-if="item.Keywords == 'W'">
                            <img v-bind:src="item.Logo" class="fl" />
                            <div class="fl num_name t-size-14">{{item.Name}}</div>
                        </div>

                        <div class="sort_letter" v-for="(item,index) in Keywords " v-if="item == 'S'">S</div>
                        <div class="list_li clearfix sort_list bottom-line " @click="brandList2(index,item.Guid,item.Name)"
                        v-bind:class="{'active-sort-list':changeIndex===index}" v-for="(item,index) in list1 " v-if="item.Keywords == 'S'">
                            <img v-bind:src="item.Logo" class="fl" />
                            <div class="fl num_name t-size-14">{{item.Name}}</div>
                        </div>

                        <div class="sort_letter" v-for="(item,index) in Keywords " v-if="item == 'Y'">Y</div>
                        <div class="list_li clearfix sort_list bottom-line " @click="brandList2(index,item.Guid,item.Name)"
                        v-bind:class="{'active-sort-list':changeIndex===index}" v-for="(item,index) in list1 " v-if="item.Keywords == 'Y'">
                            <img v-bind:src="item.Logo" class="fl" />
                            <div class="fl num_name t-size-14">{{item.Name}}</div>
                        </div>


                        <div class="sort_letter" v-for="(item,index) in Keywords " v-if="item == 'Z'">Z</div>
                        <div class="list_li clearfix sort_list bottom-line " @click="brandList2(index,item.Guid,item.Name)"
                        v-bind:class="{'active-sort-list':changeIndex===index}" v-for="(item,index) in list1 " v-if="item.Keywords == 'Z'">
                            <img v-bind:src="item.Logo" class="fl" />
                            <div class="fl num_name t-size-14">{{item.Name}}</div>
                        </div>

                </div>

js:

在此想请教一下大神们有没有比较高效的方法?

Answer 1

让后台取数据的时候做好分组，我当时这个需求跟你一样。不过我是写后台的

Answer 2

讲真0 - 0我没太细看你的html逻辑，太多了，而且重复性无解。。。。
首先，我一般会用ul li嵌套写你这个0 - 0，
你如果把你的html，抽象成js逻辑，你会觉得清爽很多0 - 0，
首先，数据获取到了，按照26个字母进行循环分组0 - 0
data=[
{title:a,arr:[{}]},
{title:b,arr:[{}]},
{title:c,arr:[{}]}
]
这个时候判断arr属性为空的数据删除，不为空的在首位再加条标题的数据
美滋滋，完成了
<ul>
<li v-for ="(list,index) in data">
<p v-for="(item,index) in data.arr" class="arr.isTitle?'title':'itemLi'"></p>
</li>
</ul>
菜鸡一个，求别喷