vue读取城市列表接口中的对应的键值A,B,C等

1.先读取接口中的数据

2.在页面中渲染(也可以在读取数据的时候写Object.keys(数据))

                    <ul>
                        <!-- city是读取数据用来接收数据的一个空数组 -->
                         <li v-for="(item,key) in Object.keys(city).sort()" :key="key">
                             <!-- {{key}} -->
                            <p> {{item}} <span v-if="key==0">(按字母排序)</span>   </p>
                             <!-- 循环出来的是键,并排序【a,b,c,d,e...】 -->
                            <ul>
                                <!-- 根据对应的键,循环取他对应的值 -->
                                <!-- <li v-for="(v,i) in city[item]" :key="i"> -->
                                   <router-link tag="li"  v-for="(v,i) in city[item]" :key="i" :to="'/city?name='+v.name"> {{v.name}} </router-link>
                                <!-- </li> -->
                            </ul>
                         </li>
                     </ul>

3.这样数据就读取成功啦!

欢迎大家转载,希望有机会可以一起交流学习!!!

©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • Swift1> Swift和OC的区别1.1> Swift没有地址/指针的概念1.2> 泛型1.3> 类型严谨 对...
    cosWriter阅读 11,157评论 1 32
  • 概要 64学时 3.5学分 章节安排 电子商务网站概况 HTML5+CSS3 JavaScript Node 电子...
    阿啊阿吖丁阅读 9,356评论 0 3
  • 本文为阮一峰大神的《ECMAScript 6 入门》的个人版提纯! babel babel负责将JS高级语法转义,...
    Devildi已被占用阅读 2,029评论 0 4
  • 我把每一个周期当成仪式 以结束对你的想念 比如日历本的最后一页 一个月的最后一天 一天中的零点 2018的最后一场...
    朱朱小超阅读 316评论 0 6
  • 昨天带孩子们参加活动,和公公的互动,我发现我的注意力的方向是关注在他教育孩子不好的一方面,其实把注意力的方向一变的...
    王钰惠_家庭教育阅读 253评论 0 0