首页 > 代码库 > vue 选城市三级联动
vue 选城市三级联动
<div id="example"> <select v-model="prov"> <option v-for="option in arr" :value="option.name"> {{ option.name }} </option> </select> <select v-model="city"> <option v-for="option in cityArr" :value="option.name"> {{ option.name }} </option> </select> <select v-model="district" v-if="district"> <option v-for="option in districtArr" :value="option.name"> {{ option.name }} </option> </select> </div> <script type="text/javascript"> var vm = new Vue({ el: ‘#example‘, data: { arr: arrAll, prov: ‘北京‘, city: ‘北京‘, district: ‘东城区‘, cityArr: [], districtArr: [] }, methods: { updateCity: function () { for (var i in this.arr) { var obj = this.arr[i]; if (obj.name == this.prov) { this.cityArr = obj.sub; break; } } this.city = this.cityArr[1].name; }, updateDistrict: function () { for (var i in this.cityArr) { var obj = this.cityArr[i]; if (obj.name == this.city) { this.districtArr = obj.sub; break; } } if(this.districtArr && this.districtArr.length > 1 && this.districtArr[1].name) { this.district = this.districtArr[1].name; } else { this.district = ‘‘; } } }, beforeMount: function () { this.updateCity(); this.updateDistrict(); }, watch: { prov: function () { this.updateCity(); this.updateDistrict(); }, city: function () { this.updateDistrict(); } } }) </script>
城市json数据量比较大,完整案例请看:
https://codepen.io/zhishaofei3-1471324920/pen/KqdGWa
vue 选城市三级联动
声明:以上内容来自用户投稿及互联网公开渠道收集整理发布,本网站不拥有所有权,未作人工编辑处理,也不承担相关法律责任,若内容有误或涉及侵权可进行投诉: 投诉/举报 工作人员会在5个工作日内联系你,一经查实,本站将立刻删除涉嫌侵权内容。