我网上搜了一圈，发现没什么具体教程，所以我出一个详细点的教程吧
重点是要找到思路，其实不难的。估计也是因为不难所以网上才没具体教程的吧
准备一串Json的数据
json数据就是对象格式和数组格式互相嵌套，在这里大家可以下载我这个（其实我也是下载别人的），本教程也是用这个来实现的
链接: https://pan.baidu.com/s/1yY2mqHlIKSixx8oI2tsNyA 提取码: qqxf
直接用<script src=""></script> 的方式导入就行了
一共要新建6个变量
因为这里用到的是三个下拉框，分别用v-model进行双向数据绑定，
三个下拉框都有进行v-for的遍历，它们遍历要用到三个数组
新建三个下拉框，分别用v-model进行双向数据绑定
html代码
<select v-model='province'></select>
<select v-model="city"></select>
<select v-model="county"></select>
arrAll是我们上面下载过来的items.js里的变量名，大家可以打开看看。
因为上面已经导入了，这里直接使用就行了
JS代码：
data: {
province: '', // 省份
city: '', // 市
county: '', // 县/区
arr: arrAll, // 所有城市的数据，已经在items.js里面定义了
cityArr:[],
countyArr:[],
},
先把第一个下拉框通过v-for遍历出来
<select v-model='province'>
<option v-for="item in arr" :value="">{{item.name}}</option>
</select>
<select v-model="city"></select>
<select v-model="county"></select>
到这一步应该都很简单，没什么难的。重点是如何、通过什么条件遍历后两个下拉框呢？
其实很简单的，因为我上面已经通过v-model绑定了下拉框，也就是我们在下拉框选择了一个省份的时候，data里面的province也会跟着变化，
这时候我们先给第一个下拉框通过@change绑定一个函数，然后根据这个province来作为条件筛选出我们想要的第二个下拉框city：市 的数据就OK了
@change：当表单元素的值发生改变的时候执行函数
根据条件筛选数组
先将整个数组arr遍历出来，然后通过if筛选数组，在上面我们已经定义了一个cityArr的数组，在这里只需要将它的值更新为筛选得到的数组就行了
JS代码
getCity() {
for (var i = 0; i < this.arr.length; i++) {
var obj = this.arr[i] // 因为要多次调用，所以用个变量来保存它
if (this.province == obj.name ) { // 如果下拉框选择的 province 等于遍历得到的 obj.name
this.cityArr= obj.sub; // 数组 cityArr 的值就等于遍历得到的 obj.sub 数组
}
}
}
此时，cityArr的值就能根据我们第一个下拉框的选择来动态更新了，随后第二个下拉框直接遍历这个数组就OK了
<select v-model='province' @change='getCity'>
<option v-for="item in arr" :value="item.name">{{item.name}}</option>
</select>
<select v-model="city">
<option v-for="item in cityArr" :value="item.name">{{item.name}}</option>
</select>
<select v-model="county"></select>
第三个下拉框也是一样的，根据第二个下拉框的选择来进行遍历，然后得到的数组保存给countyArr
最后直接上完整代码
HTML部分
<select v-model='province' @change='getCity'>
<option v-for="item in arr" :value="item.name">{{item.name}}</option>
</select>
<select v-model="city" @change='getCounty'>
<option v-for="item in cityArr" :value="item.name">{{item.name}}</option>
</select>
<select v-model="county">
<option v-for="item in countyArr" :value="item.name">{{item.name}}</option>
</select>
JS部分
let vm = new Vue({
el: '#app',
data: {
province: '',
city: '',
county: '',
arr: arrAll,
cityArr:[],
countyArr:[],
},
methods: {
getCity() {
for (var i = 0; i < this.arr.length; i++) {
var obj = this.arr[i]
if (this.province == obj.name ) {
this.cityArr = obj.sub;
}
}
},
getCounty() {
for (var i = 0; i < this.cityArr.length; i++) {
var obj = this.cityArr[i]
if (this.city == obj.name ) {
this.countyArr = obj.sub;
}
}
}
}
})
其实我们可以发现，并没有什么难点或者新的知识点，就是简单的遍历和判断而已。
还有个小bug，我们选好省市区之后，如果更改第一个下拉框的内容，第三个框不会跟着变。我们只需要给第一个下拉框绑定的函数getCity()添加一个表达式this.countyArr = '';就行了
