Vue2中的省市区三级联动（仿淘宝）

三级联动，随着越来越多的审美，出现了很多种，好多公司都仿着淘宝的三级联动 ，好看时尚，so我们公司也一样……为了贴代码方便，我把写在data里面省市区的json独立了出来，下载贴进去即可用，链接如下：http://download.csdn.net/detail/zhaohaixin0418/9862255。

首先页面显示如下：

然后我们县级所在地区会出现三级联动，如下：（以下是片段，背景色未截取）

这个张什么样，以什么形式出现，取决于贵公司的UI需求，我们公司是做成弹出层了。。然后背景色透明，这里为了节省流量，我只截取了一段，最后显示如下：

如果贵公司也跟我们需求一样，希望这个可以帮到你们。下面是在vue2项目中写的三级联动代码以及css样式：

<template>
    <section class="myAddress">
        <section>
           <section class="cont" @click="choseAdd()">
              <section>
                 <span>所在地区：{
  {
  Province?Province:''}} {
  {
  City?City:''}} {
  {
  District?District:''}}</span>
              </section>
              <img src="../../assets/main/right.png" alt="">
              <div style="clear: both"></div>
           </section>
        </section>
        <!-- 居住地址三级联动选项 -->
        <section class="showChose" v-show="showChose">
          <section class="address">
            <section class="title">
              <h4>居住地址</h4>
              <span @click="closeAdd()">×</span>
            </section>
            <section class="title">
              <div class="area" @click="provinceSelected()">
                 {
  {
  Province?Province:info[province-1].name}}
              </div>
              <div class="area" @click="citySelected()" :class="City?'':'active'">
                 {
  {
  City?City:'请选择'}}
              </div>
              <div class="area" @click="districtSelected()" :class="District?'':'active'" v-show="City">
                 {
  {
  District?District:'请选择'}}
              </div>
            </section>
            <ul>
               <li class="addList" v-for="(v,k) in info" 
                   @click="getProvinceId(v.id, v.name, k)" 
                   v-show="showProvince" 
                   :class="v.selected ? 'active' : ''">{
  {
  v.name}}</li>
               <li class="addList" v-for="(v,k) in showCityList" 
                   @click="getCityId(v.id, v.name, k)" 
                   v-show="showCity" 
                   :class="v.selected ? 'active' : ''">