用vue.js模仿京东省市区三级联动的选择组件

在最近的工作中需要一个盒京东购物车地址选择相似的一个省市区三级联动选择组件，google查了下都是下拉框形式的，于是自己写了一个，希望对使用vue开发项目的朋友有帮助，下面话不多说了，来一起看看详细的介绍吧。选择省市区是我们大家在填写地址的时候经常会遇到的一个功能，下面这篇文章主要给大家介绍了关于利用vue.js模仿实现京东省市区三级联动选择组件的相关资料，文中通过示例代码介绍的非常详细，需要的朋友可以参考借鉴，下面来一起看看吧。

显示效果如下：

注意：使用vue2.0开发

实例代码

html代码如下

<!--居住地址三级联动选项-->
 <section class="showChose" v-show="showChose">
  <section class="address">
  <section class="title">
   <h4>居住地址</h4>
   <span @click="closeAdd()">×</span>
  </section>
  <section class="title">
   <p class="area" @click="provinceSelected()">{{Province?Province:info[province-1].name}}</p>
   <p class="area" @click="citySelected()" :class="City?'':'active'">{{City?City:'请选择'}}</p>
   <p class="area" @click="districtSelected()" :class="District?'':'active'" v-show="City">{{District?District:'请选择'}}</p>
  </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' : ''">{{v.name}}</li>
   <li class="addList" v-for="(v,k) in showDistrictList" @click="getDistrictId(v.id, v.name, k)" v-show="showDistrict" :class="v.selected ? 'active' : ''">{{v.name}}</li>
  </ul>
  </section>
 </section>

js代码：

登录

 










                 
                
                
                
                记住我的登录                            
        忘记密码？ 
  
登录
 
  




  

    
    

    
  

   
  

    
    
  

    
      
      我已阅读用户协议及版权声明
  
  

注册