vue省市区级联
省市区级联
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script src="js/vue.js" type="text/javascript" charset="utf-8"></script> </head>
<body>
<div id="app">
<select v-model="sheng">
<option v-for="sheng in shengList">{{sheng}}</option>
</select>
<select v-model="city">
<option v-for="city in cityList">{{city}}</option>
</select>
<select v-model="area">
<option v-for="area in areaList">{{area}}</option>
</select>
</div>
<!-- <script type="text/javascript" src="js/jilian.js"></script> -->
<script type="text/javascript">
var shengArray= ["江苏省","湖北省", "湖南省"];
var cityArray=["南京市", "苏州市","无锡市"];
var areaArray=["鼓楼区", "秦淮区","江宁区"];
new Vue({
el: "#app",
data: {
sheng: shengArray[0],
shengList: shengArray,
city: cityArray[0],
cityList: cityArray,
area: areaArray[0],
areaList: areaArray
},
watch: {
sheng() {
if (this.sheng == "湖北省") {
this.cityList = ["武汉市", "黄石市"];
} else if (this.sheng == "湖南省") {
this.cityList = ["岳阳市", "长沙市"];
} else if (this.sheng == "江苏省") {
this.cityList = ["南京市", "苏州市","无锡市"];
}
this.city = this.cityList[0];
},
city() {
if (this.city == "武汉市") {
this.areaList = ["江汉区", "江夏区"];
} else if (this.city == "黄石市") {
this.areaList = ["上窑区", "下窑区"];
} else if (this.city == "岳阳市") {
this.areaList = ["岳阳楼区", "君山区"];
} else if (this.city == "长沙市") {
this.areaList = ["天心区", "开福区"];
} else if (this.city == "南京市") {
this.areaList = ["鼓楼区", "秦淮区","江宁区"];
} else if (this.city == "苏州市") {
this.areaList = ["姑苏区", "吴中区","相城区"];
}else if (this.city == "无锡市") {
this.areaList = ["梁溪区", "滨湖区","惠山区"];
}
this.area = this.areaList[0];
}
}
});
</script>
</body>
</html>
vue省市区级联的更多相关文章
- Vue省市区三级联选择器V-Distpicker的使用
Vue省市区三级联选择器V-Distpicker的使用 最近用的Vue+Element UI时,有些地方需要用到省市区三联选择器,网上安装并尝试了多种类似的插件,但都因为无法正常实现或是没有眼缘而弃用 ...
- bootstrap中table页面做省市区级联效果(级联库见前面级联编辑)(非select下拉框)
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8" ...
- js省市区级联选择联动
<!DOCTYPE html> <html lang="zh-cn"> <head> <meta http-equiv="Con ...
- voinc+vue实现级联选择
需求: vonic中实现级联选择 <!DOCTYPE html> <html> <head> <title>下拉框</title> < ...
- vue-area-linkage Vue省市区三级列表联动插件使用
官方演示地址 // v5及之后的版本 数据依赖于area_data npm i --save vue-area-linkage area-data import Vue from 'vue'; imp ...
- 手把手教你实现一个Vue无限级联树形表格(增删改)
前言平时我们可能在做项目时,会遇到一个业务逻辑.实现一个无限级联树形表格,什么叫做无限级联树形表格呢?就是下图所展示的内容,有一个祖元素,然后下面可能有很多子孙元素,你可以实现添加.编辑.删除这样几个 ...
- vue省市区三级联动
仿照小米之家做的一个省市区三级联动,先上代码: HTML: <template> <section class="myAddress"> <secti ...
- 完全使用ASP.NET实现的省市区级联效果
本功能特点:下级的显示和数据的加载都是由上一级下拉框的SelectedIndexChanged触发的,在上级下拉框没有选择之前,下级不会出现,用户体验比较好.无刷新方面,采用AJAX技术,在数据选择的 ...
- vue+element级联选择器对接后台数据
1.后台接口返回的数据肯定要和级联选择器的数据一致,所以我专门弄个model存放返回的值,如下:/** * @Auther: GGDong * @Date: 2019/4/3 10:30 */@Get ...
- java 爬取 国税局 省市区级联关系
爬取网址 http://www.stats.gov.cn/tjsj/tjbz/tjyqhdmhcxhfdm/2018/index.html 因为数据比较大,存储为一个json,会内存溢出. 所以按照每 ...
随机推荐
- JavaScript 错误 throw、try、catch
JavaScript错误throw.try.catch try:语句测试代码的错误: catch:语句处理错误: throw:语句创建自定义错误: finally:语句在try和catch语句之后,无 ...
- knife4j 整合springboot
1.添加依赖 <dependency> <groupId>com.github.xiaoymin</groupId> <artifactId>knife ...
- RabbitMQ学习第七章:消息确认机制之事务机制
RabbitMQ消息确认机制之事务机制. RabbitMQ中,我们可以通过持久化数据 解决RabbitMQ服务器异常 的数据丢失问题. 问题:生产者将消息发送出去,消息到底有没有到达RabbitMQ服 ...
- MySQL skip_name_resolve参数的设置
Skip_name_resolve Dynamic No Default Value OFF 默认值是off,也就是在检查客户端连接时在第一次要解析主机名(如果有开启DNS服务器,则做 " ...
- 关于promise经典面试题
这里涉及到同步和异步的问题
- JQuery 页面滚动至指定元素位置
$(window).scrollTop($("#id").offset().top - 20);
- 动画图解 Git 的 10 大命令
原文地址:https://dev.to/lydiahallie/cs-visualized-useful-git-commands-37p1 原文作者:Lydia Hallie 前言 尽管 Git 是 ...
- JAVA LIST Stream流的用法
最近在学习list流化的新写法 //我这里取的字段是Float类型的,你们需要缓存自己对应能进行计算的字段类型Integer dateCode = Integer.parseInt(DateUtil. ...
- nodejs redis执行lua脚本
const Redis = require("ioredis"); const redis = new Redis({ port: 6300, // Redis port host ...
- 向excel中写数据的python代码
①首先需要安装xlwt插件 安装语句:pip install xlwt ②python代码 1 import xlwt 2 ''' 3 调用xlwt模块中的Workbook方法来创建一个excel表格 ...