位置: 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)(塔拉基之死)

  • 华为荣耀8x手机电池能换吗(华为荣耀8x手机屏幕多少钱)

    华为荣耀8x手机电池能换吗(华为荣耀8x手机屏幕多少钱)

  • 为什么微信扫码扫不了(为什么微信扫码付款扫不出来)

    为什么微信扫码扫不了(为什么微信扫码付款扫不出来)

  • 微信流汗的表情代表什么意思(微信流汗的表情什么意思)

    微信流汗的表情代表什么意思(微信流汗的表情什么意思)

  • word 病毒主要感染并隐藏在word文件中(word文档病毒 症状)

    word 病毒主要感染并隐藏在word文件中(word文档病毒 症状)

  • 微信可以绑定别人的手机号码吗(微信可以绑定别的手机号码吗)

    微信可以绑定别人的手机号码吗(微信可以绑定别的手机号码吗)

  • 淘宝没收到货怎么投诉(淘宝没收到货怎么拒收)

    淘宝没收到货怎么投诉(淘宝没收到货怎么拒收)

  • 手机关机了iwatch还能用蜂窝吗(手机关机了iwatch还能蜂窝吗)

    手机关机了iwatch还能用蜂窝吗(手机关机了iwatch还能蜂窝吗)

  • H1芯片是几代(h1芯片是一代还是二代)

    H1芯片是几代(h1芯片是一代还是二代)

  • 拼多多化妆品开店要求(拼多多化妆品开店怎么开)

    拼多多化妆品开店要求(拼多多化妆品开店怎么开)

  • 华为手机咋关机(华为手机如何关机)

    华为手机咋关机(华为手机如何关机)

  • 飞行模式省电还是费电(飞行模式省电还是不省电)

    飞行模式省电还是费电(飞行模式省电还是不省电)

  • 苹果8p快充伤电池吗(快充对苹果8p手机有影响吗)

    苹果8p快充伤电池吗(快充对苹果8p手机有影响吗)

  • 一级二级标题什么意思(一级标题和二级标题怎么写)

    一级二级标题什么意思(一级标题和二级标题怎么写)

  • 手机显示bs是什么意思(手机左上角出现bs是表示什么意思)

    手机显示bs是什么意思(手机左上角出现bs是表示什么意思)

  • 华为荣耀8怎么修改时间(华为荣耀8怎么刷机)

    华为荣耀8怎么修改时间(华为荣耀8怎么刷机)

  • 为什么airpods连上后还是外放(为什么airpods连不上)

    为什么airpods连上后还是外放(为什么airpods连不上)

  • 如何取消天猫会员店(如何取消天猫会员)

    如何取消天猫会员店(如何取消天猫会员)

  • 拼多多退款申请被拒绝(拼多多退款申请通过,订单已取消)

    拼多多退款申请被拒绝(拼多多退款申请通过,订单已取消)

  • 淘宝几颗星变成钻石(淘宝几颗星变成一颗钻石)

    淘宝几颗星变成钻石(淘宝几颗星变成一颗钻石)

  • 拼多多续费月卡怎么关掉(拼多多续费月卡送奖品怎么领)

    拼多多续费月卡怎么关掉(拼多多续费月卡送奖品怎么领)

  • 华为m6怎么设置分辨率(华为M6怎么设置手写笔防误触)

    华为m6怎么设置分辨率(华为M6怎么设置手写笔防误触)

  • iphonexs处理器是几核的(iphonexs处理器型号)

    iphonexs处理器是几核的(iphonexs处理器型号)

  • 手机vue视频片头怎么做(vue如何添加片头打字效果)

    手机vue视频片头怎么做(vue如何添加片头打字效果)

  • 苹果8边框掉漆怎么处理(苹果8边框掉漆怎么修复)

    苹果8边框掉漆怎么处理(苹果8边框掉漆怎么修复)

  • polycom怎么用(polycom使用教程)

    polycom怎么用(polycom使用教程)

  • Web 攻防之业务安全:接口未授权访问/调用测试(敏感信息泄露)(web攻防之业务安全实战指南)

    Web 攻防之业务安全:接口未授权访问/调用测试(敏感信息泄露)(web攻防之业务安全实战指南)

  • 【JAVA】书店管理系统(附带前后端源码及资源)(基于java的电子书店管理系统)

    【JAVA】书店管理系统(附带前后端源码及资源)(基于java的电子书店管理系统)

  • 福利费的进项税额会计分录
  • 增值税加计抵减的行业
  • 本期收入和本期免税收入有什么区别
  • 税率的具体形式
  • 汇总记账凭证会计核算形式与科目汇总表
  • 去年收到一张普票超范围了怎么办
  • 无进项开票税点
  • 开办期间的利息收入怎么做账
  • 每月长摊金额如何分摊
  • 存货报废需要进项转出吗
  • 房产税按租金收入
  • 个人给公司垫付款起诉状
  • 股权转让收入需要缴纳什么税
  • 行政诉讼的适用情况
  • 土地增值税计税依据
  • 对方转出没收到怎么办
  • 进项税额转出怎么填申报表
  • 税后利润是净利润还是利润总额
  • 中小企业结算时间不超60天
  • 政府补助专款专用如何入账
  • 房屋拆迁过渡费由哪个部门发
  • 一般纳税人不能转为小规模纳税人吗
  • saproxy.exe - saproxy是什么进程 有什么用
  • 税务局手续费返还
  • 税前净利润等于什么
  • 购买现金支票的工本费计入什么科目
  • 单位性质有哪些类型
  • php中数组的常用函数及用法
  • redis使用php
  • 生产运维是干什么的
  • 怎么关闭windows defender
  • 商会账目
  • 减免的税款还用做分录吗
  • kb4592438安装失败
  • PHP:Memcached::getMulti()的用法_Memcached类
  • 清算期间会计科目
  • 增值税发票要审核成功才能开吗
  • phpget方法
  • 发票抵扣条件
  • php字符
  • 生产加工型企业安全隐患排查内容
  • 购买商品房交税流程
  • php从服务器下载文件
  • 前端如何调用后端方法
  • 农民工的职业培训
  • 赠送的商品怎么入库 企业会计准则
  • 新政府会计制度科目解读
  • php javascript
  • 公司银行开户的一些资料是公司办公室保存还是财务保存
  • 外购产品的会计分录
  • 在vue项目如何引入异步组件?
  • 科技型中小微企业贷款贴息贴保项目入库
  • 税务局报季度税
  • 预付款被退回分录
  • 汽车租赁费怎么做分录
  • 公司房租发票是法人名字能入账吗安全吗
  • 银行只收不付解除方式
  • 飞机票电子发票可以抵扣进项税吗
  • 安全生产费用提取标准 最新
  • centos 7安装教程
  • sql server ceiling
  • Windows7/2008中批量删除隧道适配器的方法
  • win8关闭触屏
  • win8.1应用商店还能用吗
  • vmware怎么放大虚拟机
  • 苹果电脑bim
  • Mac系统中pr插件汉化
  • Win10预览版怎么变回正式版
  • mini program是什么
  • 了不起的Nodejs 将JavaScript进行到底
  • java密码强度检验工具
  • csm support
  • 叠加计算公式
  • 用原生js实现过什么功能
  • gradle 混淆
  • asoul抽象
  • 个人出租房屋如何计税?看这篇
  • 申请小规模纳税人公司需要多久
  • 江苏预包装食品备案网上流程
  • 宝马535车船税
  • 免责声明:网站部分图片文字素材来源于网络,如有侵权,请及时告知,我们会第一时间删除,谢谢! 邮箱:opceo@qq.com

    鄂ICP备2023003026号

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

    友情链接: 武汉网站建设