Vue实现省市区三级联动
更新时间：2020年12月27日 09:49:27 作者：学习永远不会晚
这篇文章主要为大家详细介绍了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>
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持脚本之家。
相关文章
本文主要介绍了el-date-picker日期范围限制的实现，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2023-05-05
这篇文章主要给大家介绍了关于如何使用vuex实现兄弟组件通信的相关资料，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2018-11-11
这篇文章主要介绍了elementUI select组件默认选中效果实现的方法，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2019-03-03
Vue拖拽组件(Draggable)是一个允许与View-Model同步进行拖放排序的Vue组件,下面这篇文章主要给大家介绍了关于Vue.Draggable使用文档的相关资料,文中通过实例代码介绍的非常详细,需要的朋友可以参考下2022-08-08
在前后端的开发中总是难免会遇到前后端的跨域问题,下面这篇文章主要给大家介绍了关于vue2中vue.config.js简单配置代理跨域的相关资料,文中通过代码介绍的非常详细,需要的朋友可以参考下2024-01-01
这篇文章主要为大家介绍了Vue2中的组件通信方式，文中通过示例进行了详细的介绍，对我们学习Vue有一定的帮助，感兴趣的小伙伴可以了解一下2022-07-07
在项目中,有时需要打印页面的表格,在网上找了一个打印组件vue-print-nb,用了还不错,所以下面这篇文章主要给大家介绍了关于vue-print-nb实现页面打印功能的相关资料,需要的朋友可以参考下2022-08-08
这篇文章主要介绍了vue 获取到数据但却渲染不到页面上的解决方法，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2020-11-11
本篇文章主要介绍了关于在vue-cli中使用微信自动登录和分享的实例，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2017-06-06
这篇文章主要来和大家详细探讨一下Vue2中是如何监听数组的变化的,文中的示例代码讲解详细,感兴趣的小伙伴可以跟随小编一起学习一下2024-03-03
最新评论