Vue实现省市县三级联动（含两种：js和json数据格式）超简单！！

实现思路：

先创建三个下拉框，分别代表省、市、县

然后分别绑定 省、市、县三个下拉框：

点击省会出现所有的省份
点击对应的省份，市下拉框会对应出现对应的市
点击市会出现所有的市
点击对应的市，区下拉框会对应出现对应的区

依次可以实现 省市县三级联动。

实现效果：

vue主体实现

话不多说，直接上代码！

数据格式有js和json两种格式，实现过程大差不差，主要就是json格式需要先获取json数据。两种html过程一样，如下：

html：

<div id="app">
	<span>省</span>
	<select v-model='province' @change='changeProvince'>
	    <option v-for="(item,index) in arrAll" :value="item">{{item.name}}</option>
	</select>
	<span>市</span>
	<select v-model='city' @change='changeCity'>
		<option v-for="(item,index) in province.city" :value="item">{{item.name}}</option>
	</select>
	<span>县</span>
	<select v-model='county'>
		<option v-for="(item,index) in city.area" :value="item">{{item.name}}</option>
	</select>
</div>

数据为js时的js部分：

js：

<script src="./js/vue.js"></script>
<script src="./js/city.js"></script>
<script>
	new Vue({
		el: '#app', 
		data: { 
			arrAll:allCitys,
			province:allCitys[0],  //省对象默认第一个
			city:allCitys[0].city[0],  //市对象默认第一个
			county:allCitys[0].city[0].area[0]  //县/区对象默认第一个
		},
		methods:{
			// 切换省时,改变市与县区的默认值
			changeProvince(){
			this.city=this.province.city[0]
			this.changeCity()
	    	},
			// 切换市时,改变县区的默认值
			changeCity(){
			this.county=this.city.area[0]
			}
		}
	})
</script>

数据为json时的js部分：

js：

<script src="./js/vue.js"></script>
<script>
	new Vue({
		el: '#app', 
		data: { 
		    arrAll:[],
		    province:'',
		    city:'',
		    county:''
	    },
		methods:{
			getJson(){
			    fetch("./js/city.json")
				.then(res=>res.json())
				.then(data=>{
					// 将获取的所有数据添加到arrAll
					// concat() 方法用于连接两个或多个字符串
					this.arrAll=this.arrAll.concat(data);
					// 省对象默认第一个
					this.province=this.arrAll[0];
					// 市对象默认第一个
					this.city=this.province.city[0];
					// 县区对象默认第一个
					this.county=this.city.area[0]
				})
			},
			changeProvince(){
				// 切换省,市切换为默认第一个
				// 市对象默认第一个
				this.city=this.province.city[0];
				this.changeCity()
			},
			changeCity(){
				// 切换市,县区切换为默认第一个
				// 县区对象默认第一个
				this.county=this.city.area[1]
			}
		},
		mounted(){
			this.getJson()
		}
	})
</script>

结尾

将文章中的代码复制到对应的位置即可运行实现结果~
整个实现过程比较简单，写的过程中也加入了注释，若有不懂的可以评论交流~