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.hqwc.cn/news/260096.html

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

相关文章

TCP一对一通信

package 二十一章; import java.io.*; import java.net.ServerSocket; import java.net.Socket; import java.util.Scanner;/*** Socket服务端**/ public class SocketServer {public static void main(String[] args) {ServerSocket ss null;Socket s null;try {// 创建监听…

光伏电站全貌

光伏电站 简介 每一篇文章开篇我都会写一个内容简介&#xff0c;一来梳理自己的写作思路&#xff0c;二来方便读者整体了解文章写作意图和脉络。本篇是新能源方面的开篇之作&#xff0c;我选取了介绍光伏电站基础知识&#xff0c;首先我们要了解光伏电站基础分类&#xff0c;然…

导弹制导和打卡系统中GPS经纬度数据库字段类型的选用思路

引言&#xff1a; 在现代科技中&#xff0c;全球定位系统&#xff08;GPS&#xff09;的应用已经渗透到许多领域&#xff0c;包括导弹制导和企业打卡系统。在这两个应用中&#xff0c;GPS经纬度数据的精准性直接影响系统的性能和可靠性。因此&#xff0c;在设计数据库时&#x…

C++STL的string(超详解)

文章目录 前言C语言的字符串 stringstring类的常用接口string类的常见构造string (const string& str);string (const string& str, size_t pos, size_t len npos); capacitysize和lengthreserveresizeresize可以删除数据 modify尾插插入字符插入字符串 inserterasere…

在vscode下将ipynb文件转成markdown(.md文件)的方法

在vscode下将ipynb文件转成markdown&#xff08;.md文件&#xff09;的方法 写在最前面安装nbconvert工具vscode界面 or cmd终端基本命令将ipynb文件转换成md文件 总结 写在最前面 VSCode作为一款强大的代码编辑器&#xff0c;提供了广泛的功能。它支持多种文件格式的编辑和查…

【精选】设计模式——工厂设计模式

工厂设计模式是一种创建型设计模式&#xff0c;其主要目的是通过将对象的创建过程封装在一个工厂类中来实现对象的创建。这样可以降低客户端与具体产品类之间的耦合度&#xff0c;也便于代码的扩展和维护。 工厂设计模式&#xff1a; 以下是Java中两个常见的工厂设计模式示例…

【数据结构 — 排序 — 插入排序】

数据结构 — 排序 — 插入排序 一.排序1.1.排序的概念及其运用1.1.1排序的概念1.1.2排序运用1.1.3 常见的排序算法 二.插入排序2.1.直接插入排序2.1.1.算法讲解2.1.2.代码实现2.1.2.1.函数定义2.1.2.2.算法接口实现2.1.2.3.测试代码实现2.1.2.4.测试展示 2.2.希尔排序2.2.1.算法…

vue路由导航守卫(全局守卫、路由独享守卫、组件内守卫)

目录 一、什么是Vue路由导航守卫&#xff1f; 二、全局守卫 1、beforeEach 下面是一个beforeEach的示例代码&#xff1a; 2、beforeResolve 下面是一个beforeResolve的示例代码&#xff1a; 3、afterEach 下面是一个afterEach的示例代码&#xff1a; 三、路由独享守卫…

scikit-learn实现线性回归

要学习scikit-learn,我们必须要到scikit-clearn的官网中去查看公式和原理 scikit-learn 官网 scikit-learn 中文社区 进入官网一以后我们找到回归&#xff0c;然后再有监督学习中找到线性模型 scikit-learn实现简单的线性回归 公式&#xff1a; L2范数是指向量中每个元素的平…

NLP项目实战01之电影评论分类

介绍&#xff1a; 欢迎来到本篇文章&#xff01;在这里&#xff0c;我们将探讨一个常见而重要的自然语言处理任务——文本分类。具体而言&#xff0c;我们将关注情感分析任务&#xff0c;即通过分析电影评论的情感来判断评论是正面的、负面的。 展示&#xff1a; 训练展示如下…

软件设计中如何画各类图之八深入解析部署图:物理布局与系统架构的视觉化呈现

目录 1 前言2 部署图的符号及说明3 画部署图的步骤3.1 **识别节点**3.2 **定义组件**3.3 **标识部署关系**3.4 **添加细节** 4 部署图的用途4.1 **系统设计与规划**4.2 **系统架构分析**4.3 **系统维护与升级** 5 实际场景举例5.1 Web应用部署图5.2 云端服务部署图 6 结语 1 前…

【GAMES101】观测变换

图形学不等于 OpenGL&#xff0c;不等于光线追踪&#xff0c;而是一套生成整个虚拟世界的方法 记得有个概念叫光栅化&#xff0c;就是把三维虚拟世界的事物显示在二维的屏幕上&#xff0c;这里就涉及到观察变换 观察变换&#xff0c;叫viewing transformation&#xff0c;包括…