vue去哪儿网城市页面数据 city.json

本文介绍如何使用Vue.js来动态加载和展示去哪儿网城市页面的数据,通过解析city.json文件,实现数据绑定和页面渲染。内容包括JSON数据的读取、Vue实例的创建、组件化开发以及数据驱动视图的更新。
摘要由CSDN通过智能技术生成
{
    "ret":true,
    "data":{
      "hotCities":[{
        "id": 216,
        "spell": "beijing",
        "name": "北京"
      }, {
        "id": 1910,
        "spell": "shanghai",
        "name": "上海"
      }, {
        "id": 1904,
        "spell": "sanya",
        "name": "三亚"
      }, {
        "id": 2410,
        "spell": "xianggang",
        "name": "香港"
      }, {
        "id": 810,
        "spell": "hangzhou",
        "name": "杭州"
      }, {
        "id": 708,
        "spell": "guangzhou",
        "name": "广州"
      }, {
        "id": 310,
        "spell": "chengdu",
        "name": "成都"
      }, {
        "id": 1915,
        "spell": "shenzhen",
        "name": "深圳"
      }, {
        "id": 1926,
        "spell": "suzhou",
        "name": "苏州"
      }, {
        "id": 711,
        "spell": "guilin",
        "name": "桂林"
      }, {
        "id": 2402,
        "spell": "xian",
        "name": "西安"
      }, {
        "id": 2401,
        "spell": "xiamen",
        "name": "厦门"
      }],
      "cities": {
        "A": [{
          "id": 101,
          "spell": "abazangzuqiangzuzizhizhou",
          "name": "阿坝藏族羌族自治州"
        }, {
          "id": 102,
          "spell": "akesudiqu",
          "name": "阿克苏地区"
        }, {
          "id": 103,
          "spell": "alaer",
          "name": "阿拉尔"
        }, {
          "id": 104,
          "spell": "alashanmeng",
          "name": "阿拉善盟"
        }, {
          "id": 105,
          "spell": "aletai",
          "name": "阿勒泰"
        }, {
          "id": 106,
          "spell": "ali",
          "name": "阿里"
        }, {
          "id": 107,
          "spell": "ankang",
          "name": "安康"
        }, {
          "id": 108,
          "spell": "anqing",
          "name": "安庆"
        }, {
          "id": 109,
          "spell": "anshun",
          "name": "安顺"
        }, {
          "id": 110,
          "spell": "anyang",
          "name": "安阳"
        }, {
          "id": 111,
          "spell": "anshan",
          "name": "鞍山"
        }, {
          "id": 112,
          "spell": "aomen",
          "name": "澳门"
        }],
        "B": [{
          "id": 201,
          "spell": "bayanzhuoer",
          "name": "巴彦卓尔"
        }, {
          "id": 202,
          "spell": "bayinguole",
          "name": "巴音郭勒"
        }, {
          "id": 203,
          "spell": "bazhong",
          "name": "巴中"
        }, {
          "id": 204,
          "spell": "baicheng",
          "name": "白城"
        }, {
          "id": 205,
          "spell": "baisha",
          "name": "白沙"
        }, {
          "id": 206,
          "spell": "baishan",
          "name": "白山"
        }, {
          "id": 207,
          "spell": "baiyin",
          "name": "白银"
        }, {
          "id": 208,
          "spell": "baise",
          "name": "百色"
        }, {
          "id": 209,
          "spell": "bengbu",
          "name": "蚌埠"
        }, {
          "id": 210,
          "spell": "baotou",
          "name": "包头"
        }, {
          "id": 211,
          "spell": "baoji",
          "name": "宝鸡"
        }, {
          "id": 212,
          "spell": "baoding",
          "name": "保定"
        }, {
          "id": 213,
          "spell": "baoshan",
          "name": "保山"
        }, {
          "id": 214,
          "spell": "baoting",
          "name": "保亭"
        }, {
          "id": 215,
          "spell": "beihai",
          "name": "北海"
        }, {
          "id": 216,
          "spell": "beijing",
          "name": "北京"
        }, {
          "id": 271,
          "spell": "benxi",
          "name": "本溪"
        }, {
          "id": 218,
          "spell": "bijie",
          "name": "毕节"
        }, {
          "id": 219,
          "spell": "binzhou",
          "name": "滨州"
        }, {
          "id": 220,
          "spell": "bozhou",
          "name": "亳州"
        }, {
          "id": 221,
          "spell": "boertala",
          "name": "博尔塔拉"
        }],
        "C": [{
          "id": 301,
          "spell": "cangzhou",
          "name": "沧州"
        }, {
          "id": 302,
          "spell": "changdu",
          "name": "昌都"
        }, {
          "id": 303,
          "spell": "changji",
          "name": "昌吉"
        }, {
          "id": 304,
          "spell": "changde",
          "name": "常德"
        }, {
          "id": 305,
          "spell": "changzhou",
          "name": "常州"
        }, {
          "id": 306,
          "spell": "chaohu",
          "name": "巢湖"
        }, {
          "id": 307,
          "spell": "chaoyang",
          "name": "朝阳"
        }, {
          "id": 308,
          "spell": "chaozhou",
          "name": "潮州"
        }, {
          "id": 309,
          "spell": "chenzhou",
          "name": "郴州"
        }, {
          "id": 310,
          "spell": "chengdu",
          "name": "成都"
        }, {
          "id": 311,
          "spell": "chengde",
          "name": "承德"
        }, {
          "id": 312,
          "spell": "chengmai",
          "name": "澄迈"
        }, {
          "id": 313,
          "spell": "chizhou",
          "name": "池州"
        }, {
          "id": 314,
          "spell": "chifeng",
          "name": "赤峰"
        }, {
          "id": 315,
          "spell": "chongzuo",
          "name": "崇左"
        }, {
          "id": 316,
          "spell": "chuzhou",
          "name": "滁州"
        }, {
          "id": 317,
          "spell": "chuxiong",
          "name": "楚雄"
        }, {
          "id": 318,
          "spell": "changchun",
          "name": "长春"
        }, {
          "id": 319,
          "spell": "changgeshi",
          "name": "长葛市"
        }, {
          "id": 320,
          "spell": "changsha",
          "name": "长沙"
        }, {
          "id": 321,
          "spell": "changzhi",
          "name": "长治"
        }, {
          "id": 322,
          "spell": "chongqing",
          "name": "重庆"
        }],
        "D": [{
          "id": 401,
          "spell": "dazhou",
          "name": "达州"
        }, {
          "id": 402,
          "spell": "dali",
          "name": "大理"
        }, {
          "id": 403,
          "spell": "dalian",
          "name": "大连"
        }, {
          "id": 404,
          "spell": "daqing",
          "name": "大庆"
        }, {
          "id": 405,
          "spell": "datong",
          "name": "大同"
        }, {
          "id": 406,
          "spell": "daxinganling",
          "name": "大兴安岭"
        }, {
          "id": 407,
          "spell": "dandong",
          "name": "丹东"
        }, {
          "id": 408,
          "spell": "danzhou",
          "name": "儋州"
        }, {
          "id": 409,
          "spell": "danshui",
          "name": "淡水"
        }, {
          "id": 410,
          "spell": "dehong",
          "name": "德宏"
        }, {
          "id": 411,
          "spell": "deyang",
          "name": "德阳"
        }, {
          "id": 412,
          "spell": "dezhoushi",
          "name": "德州市"
        }, {
          "id": 413,
          "spell": "deqing",
          "name": "德庆"
        }, {
          "id": 414,
          "spell": "dingan",
          "name": "定安"
        }, {
          "id": 415,
          "spell": "dingxi",
 
  • 5
    点赞
  • 8
    收藏
    觉得还不错? 一键收藏
  • 4
    评论
评论 4
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值