位置: IT常识 - 正文

Vue------实现省市区三级联动(vue定位城市)

编辑:rootadmin
Vue------实现省市区三级联动

推荐整理分享Vue------实现省市区三级联动(vue定位城市),希望有所帮助,仅作参考,欢迎阅读内容。

文章相关热门搜索词:vue 省市区,vue实现省市区三级联动数据格式,实现vuex,vue实现省市联动,vue实现省市二级联动,vue实现省市区三级联动数据格式,vue实现省市区三级联动数据格式,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部分 ( 私聊作者获取 )


本文链接地址:https://www.jiuchutong.com/zhishi/290881.html 转载请保留说明!

上一篇:免费GPU:九天•毕昇平台使用教程

下一篇:塔拉纳基山,新西兰艾格蒙特国家公园 (© Francesco Vaninetti/plainpicture)(塔拉基之死)

  • 微信发视频号怎么设置仅自己可见(微信发视频号怎么设置不让别人看到)

    微信发视频号怎么设置仅自己可见(微信发视频号怎么设置不让别人看到)

  • 淘宝月卡在哪里查看(淘宝月卡在哪里续费)

    淘宝月卡在哪里查看(淘宝月卡在哪里续费)

  • 华为p40支持多少瓦快充(华为p40支持多少w快充)

    华为p40支持多少瓦快充(华为p40支持多少w快充)

  • 华为手机上屏幕怎么显示步数(华为手机上屏幕上的时间怎么设置)

    华为手机上屏幕怎么显示步数(华为手机上屏幕上的时间怎么设置)

  • qq黄钻可以用什么气泡(qq黄钻可以用什么装扮)

    qq黄钻可以用什么气泡(qq黄钻可以用什么装扮)

  • 手机烧屏保修吗(手机烧屏保修吗?)

    手机烧屏保修吗(手机烧屏保修吗?)

  • 液晶显示器受潮的症状(液晶显示器受潮会出现黑色竖线吗)

    液晶显示器受潮的症状(液晶显示器受潮会出现黑色竖线吗)

  • 全民k歌合唱对方知道吗(全民k歌合唱对方有重音)

    全民k歌合唱对方知道吗(全民k歌合唱对方有重音)

  • 手机明明在充电为啥充不上(手机明明在充电怎么越充越少)

    手机明明在充电为啥充不上(手机明明在充电怎么越充越少)

  • 爱奇艺的面对面快传在哪里(爱奇艺面对面传)

    爱奇艺的面对面快传在哪里(爱奇艺面对面传)

  • vieal10是p9 plus吗(vir09)

    vieal10是p9 plus吗(vir09)

  • i5 4690配什么主板(i54690配什么主板带m2接口)

    i5 4690配什么主板(i54690配什么主板带m2接口)

  • v1818ct是什么手机(v1818ct手机价格)

    v1818ct是什么手机(v1818ct手机价格)

  • 小米6x什么时候更新miui11稳定版(小米6x什么时候出厂的)

    小米6x什么时候更新miui11稳定版(小米6x什么时候出厂的)

  • 小米9谷歌服务在哪里(小米9谷歌服务框架)

    小米9谷歌服务在哪里(小米9谷歌服务框架)

  • iphone11夜景模式怎么开启(iphone11夜景模式不能开闪光灯)

    iphone11夜景模式怎么开启(iphone11夜景模式不能开闪光灯)

  • 怎么改airpords的名字(如何更改airpods)

    怎么改airpords的名字(如何更改airpods)

  • vivo怎么删除系统更新包(vivo怎么删除系统安装包)

    vivo怎么删除系统更新包(vivo怎么删除系统安装包)

  • 外拨转接是人设置的吗(外拨已转接来电是拉黑的意思吗)

    外拨转接是人设置的吗(外拨已转接来电是拉黑的意思吗)

  • oppo手机数据怎么转移到内存卡(oppo手机数据怎么导入荣耀手机)

    oppo手机数据怎么转移到内存卡(oppo手机数据怎么导入荣耀手机)

  • 苹果xr双卡怎么用,两张卡都能打电话吗(苹果xr双卡怎么设置主号副号)

    苹果xr双卡怎么用,两张卡都能打电话吗(苹果xr双卡怎么设置主号副号)

  • x27微信视频美颜怎么没有了(x27微信视频美颜找不到了咋办)

    x27微信视频美颜怎么没有了(x27微信视频美颜找不到了咋办)

  • 一加7有没有线性马达(一加7有耳机吗)

    一加7有没有线性马达(一加7有耳机吗)

  • dm分区图解 电脑dm分区如何进行(dm分区工具图解教程)

    dm分区图解 电脑dm分区如何进行(dm分区工具图解教程)

  • 喝薏米红豆水最佳时间(图文)(喝薏米红豆水最佳时间)

    喝薏米红豆水最佳时间(图文)(喝薏米红豆水最佳时间)

  • 增值税发票综合服务平台错误代码35
  • 印花税资本金项目如何缴纳
  • 增值税的纳税人是谁
  • 土地税房产税会计分录
  • 社保滞纳金所得税汇算需要调增吗
  • 政府项目如何进项目
  • 跨区预缴增值税怎么做账
  • 质保金扣款要进项税转出吗
  • 企业应收账款无论是否带息,在年末资产负债表中均应以
  • 收取不合规发票怎么处理
  • 公司转让会计分录
  • 小规模纳税人费用发票怎么做账
  • 转增股如何计算资本公积金?
  • 付给农民的扶贫款企业如何做账?
  • 资产拍卖税费谁承担
  • 201金8税盘抵扣期限是多久?
  • 小规模国税地税怎么交
  • 集体福利的增值税怎么算
  • 购入材料未入库
  • 固定资产的领用
  • 金蝶现金流量表附表项目如何指定
  • 副调基金的会计分录怎么做?
  • 公司用库存商品怎么做账
  • 使用U盘安装win7出现找不到任何设备驱动程序
  • rcapi.exe - rcapi是什么进程 有什么用
  • 周转材料计划成本会计分录
  • 开发票原则是收款之后才能开具吗
  • macbookpro安装mysql
  • 工程施工科目借贷方向
  • 下列关于企业发生的税费说法正确的是
  • php数组函数面试题
  • php流程引擎
  • 应收款余额在借方什么意思
  • yii框架连接数据库
  • 盈余公积转增资本什么意思
  • vue接入高德地图
  • vue插槽使用
  • 现代服务印花税税率
  • 盘盈的存货账务怎么处理
  • db2教程
  • php自动压缩图片
  • 非盈利组织捐赠物资收入账务处理流程
  • 城建税的减免规定有哪些
  • 上级拨付的债券怎么做账
  • 发票复核人一定要填吗
  • 接收商业承兑汇票有风险吗
  • 购买税控盘费用能全额抵扣吗
  • 应付职工薪酬账户贷方登记的是
  • 抵押贷款评估费自己出吗
  • 给员工买的手机能抵扣税吗
  • 什么叫自主研发
  • 购买固定资产是应付账款还是其他应付款
  • win10不重启
  • windows server 2008 r2离线激活
  • 给Windows Server 2008设一个简单密码
  • mac移动硬盘不能拷贝
  • freebsd使用
  • win10预览版21277
  • win7更新不了80072efe
  • win10不能注销登录
  • linux学习思路
  • KbdTray.exe - KbdTray是什么进程 有什么作用
  • window8.1重装系统
  • win7共享文件夹关闭密码保护
  • win7系统纯净版64位无法修改窗口颜色怎么办?Win7窗口颜色修改详细步骤
  • FIF互动帮助手册系列-HTML手册 flash版
  • listview的item
  • jquery 回车
  • 计算天数的excel公式
  • unity 更新
  • js的定时器函数
  • web技术栈
  • JQuery解析XML的方法小结
  • java script教程
  • 广州市税务局长
  • 未清卡会锁死吗?
  • 怎么查公司税务等级
  • 上海餐饮增值税
  • 江苏税务缴费小程序
  • 安徽国家税务局电话
  • 免责声明:网站部分图片文字素材来源于网络,如有侵权,请及时告知,我们会第一时间删除,谢谢! 邮箱:opceo@qq.com

    鄂ICP备2023003026号

    网站地图: 企业信息 工商信息 财税知识 网络常识 编程技术

    友情链接: 武汉网站建设