vue2-省市县三级联动选择框

Json数据:https://yjy-oss-files.oss-cn-zhangjiakou.aliyuncs.com/tuxian/area.json

 如何访问本地文件参考:vue-访问本地json文件_vue3读取json文件-CSDN博客

 .vue文件:

<template><select v-model="mailAddress1" style="width: 19rem;" @change="provinceChange"><option :value="item" v-for="(item, index) in provinceList" :key="index">{{ item.name }}</option></select><select v-model="mailAddress2" style="width: 19rem;margin-left:1rem;" @change="cityChange"><option :value="item" v-for="(item, index) in cityList" :key="index">{{ item.name }}</option></select><select v-model="mailAddress3" style="width: 19rem;margin-left:1rem;"><option :value="item" v-for="(item, index) in countyList" :key="index">{{ item.name }}</option></select>
</template>
<script>
export default {data() {return {mailAddress1: '',mailAddress2: '',mailAddress3: '',provinceList: '',cityList: '',countyList: ''};},mounted() {fetch('/addData.json').then(response => response.json()).then(res => {this.provinceList = res});},methods: {provinceChange() {this.cityList = this.mailAddress1.areaListthis.countyList = ""},cityChange() {this.countyList = this.mailAddress2.areaList}}
}
</script>

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/199126.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

【云备份】客户端实现 及 项目整体总结

文章目录 客户端客户端实现思想客户端文件操作类的设计与拷贝Util.hpp的设计data.hpp的设计Storage —— 持久化存储Initload——数据初始化加载 cloud.hpp的设计GetFileIdentifier——创建文件唯一标识Upload—— 文件上传IsNeedupload —— 客户端文件是否需要上传判断RunMod…

chineseocr项目不使用web推理-docker容器化

整个流程介绍 拉取 ufoym/deepo 镜像 -- 因为包含了主流深度学习框架&#xff0c;镜像4G出头。拉取 chineseocr 项目代码。修改代码&#xff0c;不使用web&#xff0c;增加命令行传入图片路径的功能打包成docker镜像。 开始 拉取 ufoym/deepo 镜像 &#xff1a;cpu版本为例 do…

设计必备网站,每天必看,无需翻墙。

设计师每天需要浏览各类设计互交网站&#xff0c;找素材、找灵感、看教程等等&#xff0c;下面就推荐几个非常好用的设计网站&#xff0c;我本人用了好几年&#xff0c;对广大设计师们一定有帮助&#xff0c;感觉收藏起来吧&#xff01; 1、免费设计素材——菜鸟图库 https://…

Java Websocket实现即时通讯功能入门教程

近年来&#xff0c;即时通讯&#xff08;Instant Messaging&#xff09;已经成为了人们日常生活中不可缺少的一部分。而Java Websocket技术则提供了一种简便高效的方式来实现即时通讯功能。本文将介绍如何使用Java Websocket来实现即时通讯&#xff0c;并提供具体的代码示例。 …

Vue自定义hook函数

hook 本质是一个函数&#xff0c;可以把 setup 函数中使用的 Composition API 进行封装。 hook 类似于 Vue2 中的 mixin 混合。 自定义 hook 的优势&#xff1a;复用代码&#xff0c;让 setup 中的逻辑更加清晰易懂。 自定义hook函数&#xff1a; 1、在 src 目录下创建 hooks…

跨境电商与本土文化融合:推动全球商业合作

随着全球经济的日益一体化&#xff0c;跨境电商成为推动全球商业合作的重要力量。在这个数字化时代&#xff0c;跨境电商不仅在商品流通上起到了桥梁作用&#xff0c;更在文化交流方面发挥了积极的作用。本文将深入探讨跨境电商如何与本土文化融合&#xff0c;以及这种融合如何…

GItLab项目导入到HBuilderX中,下载TortoiseGit 安装

1.项目拉取 选择你要下载的项目,选master下完后内部在切换想要分支,一般选http下载,下图我选的是ssh下载 选择导入,git导入 复制上地址 如果提示这个点击确定 找到下图位置安装 2.TortoiseGit 下载安装 TortoiseGit 官网下载地址&#xff1a;Download – TortoiseGit – Wind…

做一个类似东郊到家的上门服务类系统有哪些功能?

上门服务系统是一款便捷的技师接单、上门提供理疗服务的软件。我们拥有优秀的开发团队&#xff0c;为您量身定制解决方案&#xff0c;价格合理&#xff0c;用心服务。 预约上门&#xff1a;该功能是预约上门推拿理疗按摩系统软件小程序APP的核心功能。消费者通过系统预约下单&a…

待办事项app推荐哪一款?每日待办事项提醒用什么APP

每天的生活中&#xff0c;我们总是充满着各种待办事项&#xff0c;如果不及时处理&#xff0c;就会导致各种问题的出现。在众多的待办事项app中&#xff0c;如何选择一款最适合自己的app呢&#xff1f;所谓待办事项&#xff0c;通常是指尚未着手的事项。在日常生活中&#xff0…

求臻医学胃癌关爱日:美味的高“盐”值杀手

胃癌的发病率具有广泛的地域差异&#xff0c;在东南亚国家尤为高发。韩国是胃癌发病率排名第一的国家&#xff0c;其次为日本&#xff0c;中国紧随其后&#xff0c;由于中国人口基数大&#xff0c;其绝对患胃癌人数为全球第一&#xff0c;每年有100多万新诊断患者&#xff0c;其…

大文本限制录入文字后通过输入法鼠标单击还可继续超限额录入问题

textInpEl.on(keyup propertychange, "textarea", function () { var realMaxLength $(this).parent().parent().find(".maxNum").text(); //真实的最大长度 var endFontLen $(this).val().length; if (endFontLen < rea…

基于springboot的滑雪场管理系统源码

&#x1f345; 简介&#xff1a;500精品计算机源码学习&#xff0c;有8个项目关注搏主即可领取。另送简历模板、答辩模板、学习资料、答辩常见问题【关注我&#xff0c;都给你】 &#x1f345; 欢迎点赞 &#x1f44d; 收藏 ⭐留言 &#x1f4dd; 文末获取源码 目录 一、以下学…

CentOS安装Docker

Docker 分为 CE 和 EE 两大版本。CE 即社区版&#xff08;免费&#xff0c;支持周期 7 个月&#xff09;&#xff0c;EE 即企业版&#xff0c;强调安全&#xff0c;付费使用&#xff0c;支持周期 24 个月。 Docker CE 分为 stable test 和 nightly 三个更新频道。 官方网站上…

[足式机器人]Part2 Dr. CAN学习笔记-数学基础Ch0-3线性化Linearization

本文仅供学习使用 本文参考&#xff1a; B站&#xff1a;DR_CAN Dr. CAN学习笔记-数学基础Ch0-3线性化Linearization 1. 线性系统 Linear System 与 叠加原理 Superposition2. 线性化&#xff1a;Taylor Series3. Summary 1. 线性系统 Linear System 与 叠加原理 Superposition…

智慧物联可视化大屏赋能设备管理和城市运行

在智慧物联的时代&#xff0c;万物互联的网络正在构筑起一个智能化的世界。无论是家居设备、汽车、还是工业设备&#xff0c;都能通过互联网实现智能化管理和控制。随着物联网技术的发展&#xff0c;我们迅速步入了一个千姿百态的智慧时代。智慧物联逐渐渗透进我们的日常生活&a…

Vmware虚拟机简介和安装

作者&#xff1a;余小小 常见的虚拟机 vmwarevirtualBox Vmware 运行在win系统上centos运行在Vm上 先安装vm&#xff0c;在安装centos系统 Vmware介绍 不用分区或者重开机&#xff0c;就可以在同一台pc上使用多种操作系统完全隔离&#xff0c;且保护不同的操作系统环境和文…

基于PIPNet的人脸106关键点检测

做美颜需要使用到人脸关键点&#xff0c;所以整理了一下最近的想法。 按模型结构分类&#xff1a; 1.Top-Down: 分为两个步骤&#xff0c;首先&#xff0c;对于原始输入图片做目标检测&#xff0c;比如做人脸检测&#xff0c;将人脸区域抠出&#xff0c;单独送进关键点检测模…

如何清理电脑缓存?简单几个步骤轻松搞定

清理电脑缓存的方法 下面我们为大家总结了一些可以用于清理电脑缓存的方法&#xff1a; 清理浏览器缓存 浏览器缓存是电脑为了我们能够更加快速的访问页面而临时保存的数据&#xff0c;随着时间的推移&#xff0c;浏览器缓存也会越来越多&#xff0c;这样不仅不会加快网页访…

广州华锐视点:VR仿真实训室中控系统成为VR课堂教学必备工具

随着科技的不断发展&#xff0c;虚拟现实&#xff08;VR&#xff09;技术已经逐渐走进我们的生活。从游戏娱乐到医疗教育&#xff0c;VR技术的应用范围日益广泛。近年来&#xff0c;VR技术在教育领域的应用也取得了显著的成果&#xff0c;为提高教育质量和培养创新人才提供了全…

24V-36v转3.3/5/9/12V芯片3A可调降压ic

一款高效、多功能的24V-36V转3.3/5/9/12V芯片3A可调降压IC 在当今电子设备日益普及的时代&#xff0c;电源管理显得尤为重要。为了满足各种设备的需求&#xff0c;一款高效、多功能的电源转换器成为工程师们的重要选择。本文将为您介绍一款24V-36V转3.3/5/9/12V芯片3A可调降压…