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

转载于:https://www.cnblogs.com/jiangbingyang/p/5684113.html

相关资源：基于vuejs的多级联动地址选择器