省市区级联

<!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省市区级联的更多相关文章

  1. Vue省市区三级联选择器V-Distpicker的使用

    Vue省市区三级联选择器V-Distpicker的使用 最近用的Vue+Element UI时,有些地方需要用到省市区三联选择器,网上安装并尝试了多种类似的插件,但都因为无法正常实现或是没有眼缘而弃用 ...

  2. bootstrap中table页面做省市区级联效果(级联库见前面级联编辑)(非select下拉框)

    <!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8" ...

  3. js省市区级联选择联动

    <!DOCTYPE html> <html lang="zh-cn"> <head> <meta http-equiv="Con ...

  4. voinc+vue实现级联选择

    需求: vonic中实现级联选择 <!DOCTYPE html> <html> <head> <title>下拉框</title> < ...

  5. vue-area-linkage Vue省市区三级列表联动插件使用

    官方演示地址 // v5及之后的版本 数据依赖于area_data npm i --save vue-area-linkage area-data import Vue from 'vue'; imp ...

  6. 手把手教你实现一个Vue无限级联树形表格（增删改）

    前言平时我们可能在做项目时,会遇到一个业务逻辑.实现一个无限级联树形表格,什么叫做无限级联树形表格呢?就是下图所展示的内容,有一个祖元素,然后下面可能有很多子孙元素,你可以实现添加.编辑.删除这样几个 ...

  7. vue省市区三级联动

    仿照小米之家做的一个省市区三级联动,先上代码: HTML: <template> <section class="myAddress"> <secti ...

  8. 完全使用ASP.NET实现的省市区级联效果

    本功能特点:下级的显示和数据的加载都是由上一级下拉框的SelectedIndexChanged触发的,在上级下拉框没有选择之前,下级不会出现,用户体验比较好.无刷新方面,采用AJAX技术,在数据选择的 ...

  9. vue+element级联选择器对接后台数据

    1.后台接口返回的数据肯定要和级联选择器的数据一致,所以我专门弄个model存放返回的值,如下:/** * @Auther: GGDong * @Date: 2019/4/3 10:30 */@Get ...

  10. java 爬取 国税局 省市区级联关系

    爬取网址 http://www.stats.gov.cn/tjsj/tjbz/tjyqhdmhcxhfdm/2018/index.html 因为数据比较大,存储为一个json,会内存溢出. 所以按照每 ...

随机推荐

  1. SATA硬盘的数据和电源接口定义（转）

    现在 SATA设备越来越普及,包括STAT硬盘和光驱基本都已经是 SATA接口的了,以前的老式电源输出接口一般都是20针供主板加上4针的电源供硬盘也就是说以前的电脑电源给硬盘供电没有设计15针 SAT ...

  2. pgsql 数据库密码登录配置

    一.postgreSQL认证文件 pg_hba.conf 配置文件pg_hba.conf的位置,通常情况下的路径是 /etc/postgresql/[VERSION]/main/pg_hba.conf ...

  3. CORE8051-APB总线

    1 APB总线 core8051s内核支持APB3总线,APB writebuffer 为{XWB3, XWB2, XWB1, ACC}; 写访问 对FC00以上地址写值,即表示APB写操作,值为(X ...

  4. form 常用

    1.input输入数字校验 <el-input class="timeRange" type="number" v-model="value & ...

  5. 微信小程序学习记录

    尺寸单位 rpx 常常以iphone6为开发基准,  1px = 2rpx,不同设备的比例是不同的: 小程序生命周期 和vue的生命周期很相似,不过小程序的生命周期和页面.组件的生命周期又又一点不一样 ...

  6. Vue基础（2）双向绑定

    双向数据绑定 通过修改标签,例:切换radio.checkbox......都会对绑定的数据有影响 通过事件触发方法,修改data中数据,反向作用于radio.checkbox...... 1.v-m ...

  7. js 操作（数字前端去0、文字去除空格、截取字符串、保留几位小数、数字不足位数前补0）

    1.数字前端去0 var num = number.replace(/\b(0+)/gi,"") 2.文字去除空格 var str = str.replace(/(^\s*)|(\ ...

  8. Ubuntu18.04 右上角网络连接消失问题记录

    问题记录 因为一块板子要访问远程桌面,需要联网才行,然后发现桌面右上角的网络连接标志不见了,而且无论用usb共享网路,或者是无线网卡,都连不上网. 首先想是不是硬件的问题,给系统重新装了一个ubunt ...

  9. docker从C盘迁移到D盘

    docker镜像在C盘占据大量的空间,将.docker从C:\Users\Administrator迁移到E:\.docker. 一.关闭virtual Box 使virtual Box处于关闭.停止 ...

  10. Storm日志预警以及汇总解决方案

    目前在storm代码层面,捕获到的异常无法第一时间告知到开发人员,只有到最后引起显而易见的状况才会再去反查work所在服务器的日志进行问题分析,这样对后续优化代码和异常处理很不利. 但是也可以通过以下 ...