vue实现下拉二级联动_Vue实现三级联动/多级联动/城市选择

我网上搜了一圈，发现没什么具体教程，所以我出一个详细点的教程吧

重点是要找到思路，其实不难的。估计也是因为不难所以网上才没具体教程的吧

效果图.png

准备一串Json的数据

json数据就是对象格式和数组格式互相嵌套，在这里大家可以下载我这个(其实我也是下载别人的)，本教程也是用这个来实现的

链接: https://pan.baidu.com/s/1yY2mqHlIKSixx8oI2tsNyA 提取码: qqxf

直接用 的方式导入就行了

一共要新建6个变量

因为这里用到的是三个下拉框，分别用v-model进行双向数据绑定，

三个下拉框都有进行v-for的遍历，它们遍历要用到三个数组

新建三个下拉框，分别用v-model进行双向数据绑定

html代码

arrAll是我们上面下载过来的items.js里的变量名，大家可以打开看看。

因为上面已经导入了，这里直接使用就行了

JS代码：

data: {

province: '', // 省份

city: '', // 市

county: '', // 县/区

arr: arrAll, // 所有城市的数据，已经在items.js里面定义了

cityArr:[],

countyArr:[],

},

先把第一个下拉框通过v-for遍历出来

{ {item.name}}