vue省市县三级联动全网最详细，嘎嘎详细！！！

人呐！

已于 2022-10-11 15:51:52 修改

阅读量405

点赞数 1

文章标签： vue.js 前端 javascript

于 2022-10-10 18:30:19 首次发布

本文链接：https://blog.csdn.net/weixin_72653734/article/details/127249574

版权

效果图：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<!-- 创建容器 -->
		<div id="app">
			<select v-model='province' @change='changePro'>
				<option v-for="obj in arrAll" :value="obj">{{obj.name}}</option>
			</select>
			<select v-model='city'  @change='changeCity'>
				<option v-for="obj in province.city" :value="obj">{{obj.name}}</option>
			</select>
			<select v-model='county'>
				<option v-for="obj in city.area" :value="obj">{{obj.name}}</option>
			</select>
		</div>
		<!-- 引入vue -->
		<script src="./js/vue.js"></script>
		<script>
			// 初始化vue实例
			new Vue({
				el: '#app',
				// data中的数据不可以相互调用
				data: {
					arrAll: [], //所有对象
					province: '', //当前选中的省对象
					city: '', //当前选中的市对象
					county: '' //当前选中的区县对象
				},
				mounted(){
					this.getJson();
				},
				methods:{
					changePro(){
						// 切换省，市切换为默认第一个
						//市对象默认第一个
						this.city=this.province.city[0];
						this.changeCity();
					},
					changeCity(){
						// 切换市，县区切换为默认第一个
						//县区对象默认第一个
						this.county=this.city.area[1];
					},
					getJson(){
						fetch('./js/city.json')
						.then(res=>res.json())
						.then(res=>{
							//将获取的所有数据添加到arrAll
							this.arrAll=this.arrAll.concat(res)
							//省对象默认第一个
							this.province=this.arrAll[0];
							//市对象默认第一个
							this.city=this.province.city[0];
							//县区对象默认第一个
							this.county=this.city.area[1];
							
						})
					}
				}
			})
		</script>
	</body>
</html>