我网上搜了一圈,发现没什么具体教程,所以我出一个详细点的教程吧
重点是要找到思路,其实不难的。估计也是因为不难所以网上才没具体教程的吧
效果图.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}}