vue 选城市三级联动
Posted zhishaofei3
tags:
篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了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数据量比较大,完整案例请看:
以上是关于vue 选城市三级联动的主要内容,如果未能解决你的问题,请参考以下文章