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手動試試