时间:2021-07-01 10:21:17 帮助过:12人阅读
显示效果如下:
注意:使用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代码: