vue移动端JAVA城市三级联动_前端开发用Vue.js来实现城市三级联动

/p>

<

.selBoxList {

width: 100%;

margin-top: 50px;

text-align: center;

}

.selBoxList .selSt {

min-width: 100px;

display: inline-block;

position: relative;

;

}

.selBoxList .selSt .current {

width: 100%;

padding: 0 10px;

font-size: 16px;

line-height: 30px;

cursor: pointer;

float: left;

border: 1px solid #ccc;

background: #fff;

box-sizing: border-box;

position: relative;

z-index: 2;

}

.selBoxList .selSt .box {

width: 100%;

position: absolute;

left: 0;

top: 30px;

border: 1px solid #ccc;

max-height: 300px;

overflow: auto;

box-sizing: border-box;

}

.selBoxList .selSt .box span {

width: 100%;

font-size: 16px;

line-height: 30px;

cursor: pointer;

border-top: 1px solid #ccc;

float: left;

}

.selBoxList .selSt .box span:hover {

background: #f1f1f1;

}

–请选择–{{cityArr[proIndex].name}}

{{cityArr[n].name}}

–请选择–{{cityArr[proIndex].sub[cityIndex].name}}

{{cityArr[proIndex].sub[n].name}}

–请选择–{{cityArr[proIndex].sub[cityIndex].sub[areaIndex].name}}

@click=”setOption(‘areaIndex’, $index)”>{{cityArr[proIndex].sub[cityIndex].sub[n].name}}

var vm = new Vue({

el: ‘body’,

data: {

cityArr: arrCity,

proIndex: 0,

cityIndex: 0,

areaIndex: 0,

showSelect: ”

},

methods: {

setOption: function (type, index) {

this[type] = index;

if (type === ‘proIndex’) {

this.cityIndex = 0;

this.areaIndex = 0;

}

if (type === ‘cityIndex’) {

this.areaIndex = 0;

}

this.showSelect = ”;

},

toggleSelect: function (n) {

if (this.showSelect === n) {

this.showSelect = ”;

} else {

this.showSelect = n;

}

}

}

})