vuejs 三级联动

最近在学习vuejs，写了一个城市三级联动效果，可以用在项目中的收获地址管理，支持新增与修改操作

HTML

<script src="https://npmcdn.com/vue/dist/vue.js"></script>
<div id="demo">
	<address
	:province="province"
	:city="city"
	:county="county"
	></address>
</div>
<script type="x/template" id="address-template">
	<div>
		<select v-model='province'>
			<option value="">请选择</option>
			<option v-for="item in provinces" value="{{item}}">{{item}}</option>
		</select>
		<select v-model='city'>
			<option value="">请选择</option>
			<option v-for="item in citys" value="{{item}}">{{item}}</option>
		</select>
		<select v-model='county'>
			<option value="">请选择</option>
			<option v-for="item in countys" value="{{item}}">{{item}}</option>
		</select>
	</div>
</script>

JavaScript

var addressExtend=Vue.extend({
	template:"#address-template",
	props:{
		province:{
			type:String,
			default:''
		},
		city:{
			type:String,
			default:''
		},
		county:{
			type:String,
			default:''
		}
	},
	data:function(){
		return {
			addressData:null
		}
	},
	init:function(){
		var that=this
		setTimeout(function(){
			that.addressData={
				'湖南':{
					'长沙':{
						"开福区":{},
						"岳麓区":{}
					},
					'怀化':{
						'沅陵':{},
						'溆浦':{}
					}
				},
				'广东':{
					'广州':{
						'天河区':{},
						'越秀区':{}
					},
					'深圳':{
						'宝安':{},
						'南山':{}
					}
				}
			}
		},1000)
	},
	watch:{
		province:function(val,oldval){
			if(val!==oldval){
				this.city=''
			}
		},
		city:function(val,oldval){
			if(val!==oldval){
				this.county=''
			}
		}
	},
	computed:{
		provinces:function(){
			if(!this.addressData)return

			var c=[]
			for(var key in this.addressData){
				c.push(key)
			}

			return c
		},
		citys:function(){
			if(!this.addressData
				|| !this.province)
				return 

			var c=[]
			for(var key in this.addressData[this.province]){
				c.push(key)
			}

			return c
		},
		countys:function(){
			if(!this.addressData
				||!this.city)
				return

			var c=[]
			for(var key in this.addressData[this.province][this.city]){
				c.push(key)
			}

			return c
		}
	}
})

Vue.component('address',addressExtend)

var demo1=new Vue({
	el:'#demo',
	data:{
		province:'广东',
		city:'广州',
		county:'天河区'
	}
})

去jsfiddle手动试试

此文同步发表于Segmentfault