vuejs 三级联动

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

HTML

            请选择            {{item}}            请选择            {{item}}            请选择            {{item}}

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手动试试

关键字：vue.js, 联动

版权声明

本文来自互联网用户投稿，文章观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处。如若内容有涉嫌抄袭侵权/违法违规/事实不符，请点击 举报 进行投诉反馈！