Vue实现省市区三级联动


Posted in Vue.js onDecember 27, 2020

本文实例为大家分享了Vue实现省市区三级联动的具体代码,供大家参考,具体内容如下

效果图:

Vue实现省市区三级联动

代码:

<!DOCTYPE html>
<html>
 <head>
  <meta charset="GBK">
  <title></title>
  <style>
  </style>
 </head>
 <body>
  <div id="app" >
  <select v-model='prov' @change="changeCity();changeCity1()">
  <option v-for="(item,i) in items">{{item.name}}</option>
  </select>
  
  -- <select v-model='city' @change="changeCity1">
  <option v-for="(item,i) in cityArr">{{item.name}}</option>
  </select>
  
  -- <select v-model='city1'>
  <option v-for="(item,i) in cityArr1">{{item.name}}</option>
  </select> 
  
  <p>您选中的是:{{prov}}-{{city}}-{{city1}}</p>
 </div> 
 
 </body>
 <script src="vue.js"></script>
 <script>
 var id=1;
 new Vue({
 el:'#app',
 data:{
 prov:'北京',
 city:'',
 city1:'',
 items:[
  {name:'北京',
  sub:[
  {name:'北京市',sub:[{name:'北京市11'},{name:'北京市12'},{name:'北京市13'}]},
  {name:'北京市2',sub:[{name:'北京市21'},{name:'北京市22'},{name:'北京市23'}]},
  ]
 },
  {name:'江西',
  sub:[
  {name:'南昌市',sub:[{name:'高新区'},{name:'西湖区'},{name:'瑶湖区'}]},
  {name:'赣州市',sub:[{name:'赣州市1'},{name:'赣州市2'},{name:'赣州市3'}]},
  {name:'抚州市',sub:[{name:'抚州市1'},{name:'抚州市2'},{name:'抚州市3'}]}
  ]
  }
 ],
 cityArr:[],
 cityArr1:[]
 },
 mounted:function(){//执行默认选择
 this.changeCity();
 this.changeCity1();
 },
 methods:{
 changeCity:function(){//省切换
 var me=this;
 var item ;
 me.items.forEach(function(ele){
  if(ele.name===me.prov){//判断与prov是否相等,相等的表示被切换选中的省份
  item = ele;
  }
 })
 if(item){
  this.cityArr=item.sub;//将选中的item的sub设置给cityArr 用于显示市
  this.city=item.sub[0].name;//默认选择第一个市
  
  this.cityArr1=[];
  this.city1='';
 }
 
 },
 changeCity1:function(){//市切换
 var me=this;
 var item ;
 me.cityArr.forEach(function(ele){
  if(ele.name===me.city){//判断与city是否相等,相等的表示被切换选中的市
  item = ele;
  }
 })
 if(item){
  this.cityArr1=item.sub;//将选中的item的sub设置给cityArr1 用于显示区
  this.city1=item.sub[0].name;//默认选择第一个区
 }
 }
 }
 })
 </script> 
 
</html>

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Vue.js 相关文章推荐
Vue实现购物小球抛物线的方法实例
Nov 22 Vue.js
在vue中使用inheritAttrs实现组件的扩展性介绍
Dec 07 Vue.js
Vue 组件注册全解析
Dec 17 Vue.js
基于Vue3.0开发轻量级手机端弹框组件V3Popup的场景分析
Dec 30 Vue.js
vue 组件基础知识总结
Jan 26 Vue.js
详解Vue的七种传值方式
Feb 08 Vue.js
vue3使用vue-router的完整步骤记录
Jun 20 Vue.js
Vue实现tab导航栏并支持左右滑动功能
Jun 28 Vue.js
vue实现锚点定位功能
Jun 29 Vue.js
vue 把二维或多维数组转一维数组
Apr 24 Vue.js
Vue Mint UI mt-swipe的使用方式
Jun 05 Vue.js
Vue Element plus使用方法梳理
Dec 24 Vue.js
vue3.0自定义指令(drectives)知识点总结
Dec 27 #Vue.js
vue 使用 sortable 实现 el-table 拖拽排序功能
Dec 26 #Vue.js
在vue项目中封装echarts的步骤
Dec 25 #Vue.js
vue中封装axios并实现api接口的统一管理
Dec 25 #Vue.js
Vue 简单实现前端权限控制的示例
Dec 25 #Vue.js
Vue通过阿里云oss的url连接直接下载文件并修改文件名的方法
Dec 25 #Vue.js
vue使用require.context实现动态注册路由
Dec 25 #Vue.js
You might like
3个PHP多维数组转为一维数组的方法实例
2014/03/13 PHP
php实现的树形结构数据存取类实例
2014/11/29 PHP
JavaScript 对象、函数和继承
2009/07/07 Javascript
使用Jquery Aajx访问WCF服务(GET、POST、PUT、DELETE)
2012/03/16 Javascript
jquery dialog open后,服务器端控件失效的快速解决方法
2013/12/19 Javascript
javascript实例--教你实现扑克牌洗牌功能
2014/05/15 Javascript
jQuery控制cookie过期时间的方法
2015/04/07 Javascript
实用jquery操作表单元素的简单代码
2016/07/04 Javascript
html5+CSS 实现禁止IOS长按复制粘贴功能
2016/12/28 Javascript
node.js中cluster的使用教程
2017/06/09 Javascript
JavaScript实现离开页面前提示功能【附jQuery实现方法】
2017/09/26 jQuery
React Native开发封装Toast与加载Loading组件示例
2018/09/08 Javascript
js实现页面图片消除效果
2020/03/24 Javascript
vue实现页面切换滑动效果
2020/06/29 Javascript
解决VUE-Router 同一页面第二次进入不刷新的问题
2020/07/22 Javascript
如何通过vscode运行调试javascript代码
2020/07/24 Javascript
OpenLayers3实现测量功能
2020/09/25 Javascript
Python转换HTML到Text纯文本的方法
2015/01/15 Python
如何使用Flask-Migrate拓展数据库表结构
2019/07/24 Python
python安装本地whl的实例步骤
2019/10/12 Python
django ajax发送post请求的两种方法
2020/01/05 Python
python中使用you-get库批量在线下载bilibili视频的教程
2020/03/10 Python
PyInstaller运行原理及常用操作详解
2020/06/13 Python
基于CSS3实现立方体自转效果
2016/03/01 HTML / CSS
德国富尔达运动鞋店:43einhalb
2020/12/25 全球购物
英语系本科生个人求职信
2013/09/21 职场文书
单位领导证婚词
2014/01/14 职场文书
加拿大探亲邀请信
2014/01/28 职场文书
函授自我鉴定范文
2014/02/06 职场文书
幼儿园课题实施方案
2014/05/14 职场文书
遵纪守法演讲稿
2014/05/23 职场文书
大学生实习证明范文(5篇)
2014/09/18 职场文书
名人传读书笔记
2015/06/26 职场文书
如何用Laravel包含你自己的帮助函数
2021/05/27 PHP
Python排序算法之插入排序及其优化方案详解
2021/06/11 Python
nginx设置资源请求目录的方式详解
2022/05/30 Servers