vuejs 三级联动

这是1.X版本的demo
如果无法显示效果替换vuejs的url地址

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

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/1.0.26/vue.min.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手动试试