vue.js模仿京东省市区三级联动的选择组件实例代码

前言

在最近的工作中需要一个盒京东购物车地址选择相似的一个省市区三级联动选择组件，谷歌查了下都是下拉框形式的，于是自己写了一个，希望对使用某视频剪辑软件开发项目的朋友有帮助，下面话不多说了，来一起看看详细的介绍吧。

显示效果如下：

注意：使用vue2.0开发

实例代码

超文本标记语言代码如下

！-居住地址三级联动选项-section class=' show choice ' v-show=' show choice ' section class=' address ' section class=' title ' H4居住地址/H4 span @ click=' closeAdd()'/span/section section class=' title ' div class=' area ' @ click=' provinceSelected()' { }省份？省份：信息[省份-1]。name } }/div div class=' area ' @ click=' City selected()' : class=' City '？"活动"{ {城市？":"请选择} }/div class=' area ' @ click=' regionselected()' : class=' District '？"活动" v-show="城市"{区？第：区请选择} }/div/section ul Li class=' addList ' v-for='(v，k)in info ' @ click=' GetProvincid(v . id，v.name，k)' v-show=' show Provincium ' : class=' v . selected？active ' : ' ' { { v . name } }/Li Li class=' addList ' v-for='(v，k)在显示城市列表' @ click=' getcity id(v . id，v . name，k)' v-show=' show city ' : class=' v . selected？active ' : ' ' { { v . name } }/Li Li class=' addList ' v-for='(v，k)在显示地区列表' @ click=' GetQuartiID(v . id，v . name，k)' v-show=' show district ' : class=' v . selected？活动： ' ' { { v . name } }/Li/ul/section/section js代码：

导出默认值{ name: 'myAddress '，data(){ return { show choose : false，showProvince: true，showDistrict: false，showDistrictList: false，province: 5，City: 3，district: 57，GetProvinceId: 2，District: false，Province: false，City循环判断是否为当前selected: false，info: [ {id: 1，name: '北京，城市3360[{ id : 1，名称： '北京市，地区： [ {id: 1，名称： '东城区}，{id: 2，name: '西城区}，{id: 3，name: '崇文区}，{id: 4，name: '宣武区}，{id: 5，name: '朝阳区}，{id: 6，name: '丰台区}，{id: 7，name: