本文实例为大家分享了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>
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持。
© 版权声明
THE END
暂无评论内容