数据格式为：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>四级联动</title>
<script src="../vue3.js"></script>
<script src="./cityJson.js"></script>
</head>
<body>
<div id="root">
<h1>你选择了--{{sheng}}--{{shi}}--{{qu}}--{{street}}</h1>
<select @change="shengChange" v-model="sheng">
<option value="">--请选择省--</option>
<option v-for="(p,key) in shengList" :value="key" :key="key">{{key}}</option>
</select>
<select v-model="shi" @change="shiChange">
<option value="">--请选择市--</option>
<option v-for="(c,key) in shiList" :value="key" :key="key">{{key}}</option>
</select>
<select v-model="qu" @change="quChange">
<option value="">--请选择区--</option>
<option v-for="(q,key) in quList" :value="key" :key="key">{{key}}</option>
</select>
<select v-model="street">
<option value="">--请选择街道--</option>
<option v-for="v in streetList" :value="v" :key="v">{{v}}</option>
</select>
</div>
<script>
const app = Vue.createApp({
el: "#root",
data() {
return {
shengList: cityJson,
shiList: {},
quList: {},
streetList: [],
sheng: '',
shi: '',
qu: '',
street: ''
}
},
methods: {
shengChange() {
this.shiList = this.shengList[this.sheng]
// 清空
this.shi = "";
this.street = "";
this.qu = "";
this.quList = {};
this.streetList = []
},
shiChange() {
this.quList = this.shiList[this.shi];
this.streetList = [];
this.qu = ''
this.street = ''
},
quChange() {
this.streetList = this.quList[this.qu]
this.street = ''
}
},
});
app.mount('#root')
</script>
</body>
</html>
结果为：
标签：vue,qu,--,quList,js,street,streetList,shi,model From： https://www.cnblogs.com/maxiaopi/p/16852594.html