省市区级联
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script src="js/vue.js" type="text/javascript" charset="utf-8"></script>
</head>
<body>
<div id="app">
<select v-model="sheng">
<option v-for="sheng in shengList">{{sheng}}</option>
</select>
<select v-model="city">
<option v-for="city in cityList">{{city}}</option>
</select>
<select v-model="area">
<option v-for="area in areaList">{{area}}</option>
</select>
</div>
<!-- <script type="text/javascript" src="js/jilian.js"></script> -->
<script type="text/javascript">
var shengArray= ["江苏省","湖北省", "湖南省"];
var cityArray=["南京市", "苏州市","无锡市"];
var areaArray=["鼓楼区", "秦淮区","江宁区"];
new Vue({
el: "#app",
data: {
sheng: shengArray[0],
shengList: shengArray,
city: cityArray[0],
cityList: cityArray,
area: areaArray[0],
areaList: areaArray
},
watch: {
sheng() {
if (this.sheng == "湖北省") {
this.cityList = ["武汉市", "黄石市"];
} else if (this.sheng == "湖南省") {
this.cityList = ["岳阳市", "长沙市"];
} else if (this.sheng == "江苏省") {
this.cityList = ["南京市", "苏州市","无锡市"];
}
this.city = this.cityList[0];
},
city() {
if (this.city == "武汉市") {
this.areaList = ["江汉区", "江夏区"];
} else if (this.city == "黄石市") {
this.areaList = ["上窑区", "下窑区"];
} else if (this.city == "岳阳市") {
this.areaList = ["岳阳楼区", "君山区"];
} else if (this.city == "长沙市") {
this.areaList = ["天心区", "开福区"];
} else if (this.city == "南京市") {
this.areaList = ["鼓楼区", "秦淮区","江宁区"];
} else if (this.city == "苏州市") {
this.areaList = ["姑苏区", "吴中区","相城区"];
}else if (this.city == "无锡市") {
this.areaList = ["梁溪区", "滨湖区","惠山区"];
}
this.area = this.areaList[0];
}
}
});
</script>
</body>
</html>
标签：city,级联,cityList,sheng,else,vue,省市区,areaArray,areaList From： https://www.cnblogs.com/19981206-zxb/p/17020403.html