html城市二级联动vue,vue 2.x实现城市二级联动

城市数据见 城市数据

样式是基于bootstrap 直接上代码

html部分

地区:

请选择

{{p.area_name}}

请选择

{{c.area_name}}

var app = new Vue({

el:"#vue_container",

data:{

current_page:$_GET.page?parseInt($_GET.page):1, /* $_GET为获取url数据，见最下方 */

province:province, //parent_id 等于0 的城市数据对象

chose_province:0,

cities:cities, //parent_id 不等于0 的城市数据对象，多级联动的也是如此

chose_city:0,

},

mounted:function() {

if(typeof $_GET.area_id == 'undefined') {

return ;

}

for(var p in this.cities) {

if(cities[p].id == $_GET.area_id) {

this.chose_province = cities[p].parent_id;

break;

}

}

this.chose_city = $_GET.area_id;

}

})

var $_GET = (function(){

var url = window.document.location.href.toString();

var u = url.split("?");

if(typeof(u[1]) == "string"){

u = u[1].split("&");

var get = {};

for(var i in u){

var j = u[i].split("=");

get[j[0]] = j[1];

}

return get;

} else {

return {};

}

})();