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 相关文章推荐
深入了解Vue3模板编译原理
Nov 19 Vue.js
Vue实现图书管理小案例
Dec 03 Vue.js
vue-calendar-component 封装多日期选择组件的实例代码
Dec 04 Vue.js
详解Vue中的自定义指令
Dec 07 Vue.js
Vue实现简单购物车功能
Dec 13 Vue.js
vue 动态创建组件的两种方法
Dec 31 Vue.js
如何在VUE中使用vue-awesome-swiper
Jan 04 Vue.js
vue实现禁止浏览器记住密码功能的示例代码
Feb 03 Vue.js
解读Vue组件注册方式
May 15 Vue.js
vue实现列表垂直无缝滚动
Apr 08 Vue.js
vue组件冲突之引用另一个组件出现组件不显示的问题
Apr 13 Vue.js
vue二维数组循环嵌套方式 循环数组、循环嵌套数组
Apr 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
阿拉伯的咖啡与水烟
2021/03/03 咖啡文化
php数组函数序列之each() - 获取数组当前内部指针所指向元素的键名和键值,并将指针移到下一位
2011/10/31 PHP
php使用递归函数实现数字累加的方法
2015/03/16 PHP
PHP getallheaders无法获取自定义头(headers)的问题
2016/03/23 PHP
PHP实现中国公民身份证号码有效性验证示例代码
2017/05/03 PHP
JScript分割字符串示例代码
2013/09/04 Javascript
jQuery+PHP打造滑动开关效果
2014/12/16 Javascript
Bootstrap中的表单验证插件bootstrapValidator使用方法整理(推荐)
2016/06/21 Javascript
手机Web APP如何实现分享多平台功能
2016/08/19 Javascript
Vue.js每天必学之指令系统与自定义指令
2016/09/07 Javascript
详解nodejs 文本操作模块-fs模块(一)
2016/12/22 NodeJs
JavaScript获取当前时间向前推三个月的方法示例
2017/02/04 Javascript
Angular 4中如何显示内容的CSS样式示例代码
2017/11/06 Javascript
利用jquery如何从json中读取数据追加到html中
2017/12/01 jQuery
webstorm中vue语法的支持详解
2018/05/09 Javascript
vscode 开发Vue项目的方法步骤
2018/11/25 Javascript
微信小程序学习笔记之跳转页面、传递参数获得数据操作图文详解
2019/03/28 Javascript
微信小程序实现简单购物车功能
2020/12/30 Javascript
[02:53]DOTA2英雄昆卡基础教程
2013/11/25 DOTA
Python使用tkinter库实现文本显示用户输入功能示例
2018/05/30 Python
Python PyQt5 Pycharm 环境搭建及配置详解(图文教程)
2019/07/16 Python
Python爬虫学习之翻译小程序
2019/07/30 Python
python GUI库图形界面开发之PyQt5窗口控件QWidget详细使用方法
2020/02/26 Python
解决阿里云邮件发送不能使用25端口问题
2020/08/07 Python
使用PyCharm官方中文语言包汉化PyCharm
2020/11/18 Python
Algenist奥杰尼官网:微藻抗衰老护肤品牌
2017/07/15 全球购物
国外最大的眼镜网站:Coastal
2017/08/09 全球购物
全球最大最受欢迎的旅游社区:Tripadvisor
2017/11/03 全球购物
英国休闲奢华的缩影:Crew Clothing
2019/05/05 全球购物
开办化妆品公司创业计划书
2013/12/26 职场文书
自行车广告词大全
2014/03/21 职场文书
2015年教师节演讲稿范文
2015/03/19 职场文书
2015年超市工作总结
2015/04/09 职场文书
催款函范文
2015/06/24 职场文书
MongoDB使用profile分析慢查询的步骤
2021/04/30 MongoDB
使用python绘制分组对比柱状图
2022/04/21 Python