vue三级联动实现代码（Vue——实现省市区三级联动）
导读：本篇将用，vue框架实现省市区三级联动 一、思路...
本篇将用 ，vue框架实现省市区三级联动
一 、思路
三个下拉框 ，分别代表省 、市 、区
下面的任务就是 ，分别绑定 省 、市 、区三个下拉框：
点击省会出现所有的省份
点击对应的省份 ，市下拉框会对应出现对应的市
点击市会出现所有的市
点击对应的市 ，区下拉框会对应出现对应的区 。
依次可以实现 省市区三级联动 。
二 、vue主体实现
如下面代码所示
<body> <div id="app"> <div> <span>省</span> <select v-model="pro"> <option :value="p.adcode" v-for="p in list">{{p.name}}</option> </select> <span>市</span> <select v-model="city"> <option :value="item.adcode" v-for="(item,index) in list.find(c=>c.adcode==pro).districts"> {{item.name}} </option> </select> <span>区</span> <select v-model="county"> <option :value="item.adcode" v-for="(item,index) in list.find(c=>c.adcode==pro).districts.find(x=>x.adcode==city).districts"> {{item.name}} </option> </select> </div> </div> <script> new Vue({ el: "#app", data: { pro: "110000", city: "", county: "", list: citys }, }) </script> </body>三 、完善代码（联动）
要想实现省市区三级联动
对 省 、市进行监控 ，对应的数据改变 ，就改变对应的省市县 ，以此来完成省市县三级联动
完善后的 Vue 如下
new Vue({ el: "#app", data: { pro: "110000", city: "", county: "", list: citys }, methods: { loadCity(proCode) { let $citys = this.list.find(s => s.adcode == proCode).districts[0]; if ($citys != null) { this.city = $citys.adcode; } }, loadCounty(proCode, cityCode) { let $county = this.list.find(s => s.adcode == proCode).districts.find(x => x.adcode == cityCode).districts[0]; if ($county != null) { this.county = $county.adcode; } } }, created() { this.loadCity(this.pro); this.loadCounty(this.pro, this.city); }, watch: { pro: function (newVal, oldVal) { this.loadCity(newVal); }, city: function (newVal, oldVal) { this.loadCounty(this.pro, this.city); } }, })四 、全部代码
html部分
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>Title</title> <script src="../js/vue.js"></script> <script src="../js/citys.js"></script> <script> console.log(citys) </script> <style> select{ width: 188px; height: 20px; text-align: center; border-radius: 20px; } </style> </head> <body> <div id="app"> <div> <span>省</span> <select v-model="pro"> <option :value="p.adcode" v-for="p in list">{{p.name}}</option> </select> <span>市</span> <select v-model="city"> <option :value="item.adcode" v-for="(item,index) in list.find(c=>c.adcode==pro).districts"> {{item.name}} </option> </select> <span>区</span> <select v-model="county"> <option :value="item.adcode" v-for="(item,index) in list.find(c=>c.adcode==pro).districts.find(x=>x.adcode==city).districts"> {{item.name}} </option> </select> </div> </div> <script> new Vue({ el: "#app", data: { pro: "110000", city: "", county: "", list: citys }, methods: { loadCity(proCode) { let $citys = this.list.find(s => s.adcode == proCode).districts[0]; if ($citys != null) { this.city = $citys.adcode; } }, loadCounty(proCode, cityCode) { let $county = this.list.find(s => s.adcode == proCode).districts.find(x => x.adcode == cityCode).districts[0]; if ($county != null) { this.county = $county.adcode; } } }, created() { this.loadCity(this.pro); this.loadCounty(this.pro, this.city); }, watch: { pro: function (newVal, oldVal) { this.loadCity(newVal); }, city: function (newVal, oldVal) { this.loadCounty(this.pro, this.city); } }, }) </script> </body> </html>js部分 ( 私聊作者获取 )
创心域SEO版权声明：以上内容作者已申请原创保护，未经允许不得转载，侵权必究！授权事宜、对本内容有异议或投诉，敬请联系网站管理员，我们将尽快回复您，谢谢合作！