标签：vue vant list key 组件 省市区 areaList

一、index页面引入在线js数据

//在index.html中引入省市区的json文件
<script src="https://sucai.suoluomei.cn/sucai_zs/file/20191217145416-area.js"></script>

二、引入vant组件

import Vue from 'vue';
import { Area } from 'vant';
Vue.use(Area);

三、基础用法

//初始化省市区组件时，需要通过 area-list 属性传入省市区数据。
<van-area title="标题" :area-list="areaList" />
//areaList 为对象结构，包含 province_list、city_list、county_list 三个 key。每项以地区码作为 key，省市区名字作为 value。地区码为 6 位数字，前两位代表省份，中间两位代表城市，后两位代表区县，以 0 补足 6 位。
data() {
    return {
      areaList: are, //are为json文件里的areaList名字，直接这样用就行
	 };
 }

这样渲染出的下拉框就能进行全国省市区选择了~

标签：vue,vant,list,key,组件,省市区,areaList
来源： https://blog.csdn.net/TKP666/article/details/121790294

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。