效果图：
代码：
<!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>
