初学前端

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

2019-12-11  本文已影响0人  焚心123

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

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

上一篇 下一篇

猜你喜欢

热点阅读