vue.js实现省市区三级联动

	
	



	
{{province}}
	
		{{v.name}}
	
	
{{city}}
	
		{{v.name}}
	
	
{{district}}
	
		{{v.name}}
	

window.onload = function(){
	var myvue = new Vue({
		el:'#my',
		data:{
			province:'北京',
			city:'北京',
			district:'',
			cityArr:[],
			districtArr:[],
			arr:[{
				name:'北京',
				sub:[
					{name:'请选择',sub:[]},
					{
						name:'北京',
					 	sub:[{name:'请选择'},{name:'东城区'},{name:'西城区'},{name:'平谷区'},]
					 },
				]
			},
			{
				name:'陕西',
				sub:[
					{name:'请选择',sub:[]},
					{
						name:'西安',
						sub:[{name:'请选择'},{name:'长安区'},{name:'未央区'},{name:'韦曲南'},]
					},
					{
						name:'渭南',
						sub:[{name:'大荔'},{name:'韩城'},{name:'合阳'},{name:'华县'},]
					}
				]
			},
			]
		},
		methods:{
			updateCity:function(){ //更新市数据
				var self = this;
				this.arr.forEach(function(item,index){
					if(item.name == self.province){
						self.cityArr = item.sub;
					}
				});
				// 选择一级后，二级的城市名要跟着改变
				self.city = self.cityArr[1].name;
			},
			updateDistrict:function(){ //更新市数据
				var self = this;
				this.cityArr.forEach(function(item,index){
					if(item.name == self.city){
						self.districtArr = item.sub;
					}
				});
				if(self.districtArr && self.districtArr.length>0){
					self.district = self.districtArr[1].name;
				}else{
					self.district='';
				}
				
			}
		},
		mounted:function(){
			this.updateCity();
			this.updateDistrict();
		}
	})
}