美文网首页初学前端
vue读取城市列表接口中的对应的键值A,B,C等

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

作者: 焚心123 | 来源:发表于2019-12-11 22:38 被阅读0次

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.这样数据就读取成功啦!

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

相关文章

网友评论

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

    本文链接:https://www.haomeiwen.com/subject/nnaagctx.html