你如城市与省份间的二级联动效果

<!DOCTYPE html>

<html>

<head>

	<meta charset="UTF-8">

	<title>demo</title>

	<style type="text/css">

		.pag-set-bg{width:100%;height:100%;overflow-x:hidden;overflow-y:auto;}

	</style>

</head>

<body>

<div id="app">

	<div class="inputLine">

          <span>所在区域</span>

          <select name="" v-model="countryName" @change="selectCountry">

            <option :value="item" v-for="(item,index) in area">

              {{item.country}}

              <svg class="icon icon-arrow-bottom" aria-hidden="true">

                <use xlink:href="#icon-arrow-bottom"></use>

              </svg>

            </option>

          </select>

          <select name="" v-model="cityName">

            <option :value="item" v-for="(item,index) in countryName.city">

              {{item}}

              <svg class="icon icon-arrow-bottom" aria-hidden="true">

                <use xlink:href="#icon-arrow-bottom"></use>

              </svg>

            </option>

          </select>

        </div>

</div>

<script type="text/javascript" src="../../js/jquery_v3.3.1.js"></script>

<script src="../../js/vue.js"></script>

<script src="../../js/vue-resource.min.js"></script>

<script>

	new Vue({

		el:'#app',

		data:{

			list:[

				{

		          text: '这是第1条数据'

		        }

			],

			UniversityList:[],

        	schoolList:[],

        	countryName:{},

	        cityName:"请选择城市",

	        area:[

	          {

	            "country":"美国",

	            "city":[

	              "纽约",

	              "洛杉矶",

	              "旧金山",

	              "西雅图",

	              "波士顿",

	              "休斯顿",

	              "圣地亚哥",

	              "芝加哥",

	              "其它",

	            ]

	          },

	          {

	            "country":"加拿大",

	            "city":[

	              "温哥华",

	              "多伦多",

	              "蒙特利尔",

	              "其它"

	            ]

	          },

	          {

	            "country":"澳大利亚",

	            "city":[

	              "悉尼",

	              "墨尔本",

	              "其它"

	            ]

	          },

	          {

	            "country":"新加坡",

	            "city":[

	              "新加坡"

	            ]

	          },

	        ],

		},

		methods:{

		      selectCountry(value){

		        this.cityName=this.countryName.city[0];

		      },

			}

		})

</script>

</body>

</html>

　　http://www.cnblogs.com/beileixinqing/p/8252153.html

vue实现二级联动效果的更多相关文章

  1. 美团HD(4)-二级联动效果

    DJNavDropView.m #import "DJNavDropView.h" #import "DJCategory.h" #import "D ...

  2. vue elementui二级联动下拉选项demo

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

  3. vue的二级联动，数据是从php获取到的

    1.首先,一级要有change改变事件的关键字,v-on:change="selectarr($event)" 这是created(){}函数里面的自动调用一级分类的数据 html ...

  4. asp.net DropDownList实现二级联动效果

    1.在aspx页面中,拖入两个DroDownList控件,代码如下: <div>   <asp:DropDownList ID="s1" runat=" ...

  5. element ui select组件和table做分页完整功能和二级联动效果

    <template> <div class="index_box"> <div class="search_box"> &l ...

  6. asp.net DropDownList无刷新ajax二级联动实现详细过程

    只适合新手制作DropDownList无刷新ajax二级联动效果: 数据库实现,添加两表如图:表1,pingpai,表2,type,具体数据库实现看自己的理解: //页面主要代码: <asp:S ...

  7. Asp.Net下，基于Jquery的Ajax二级联动

    最近做一个项目,要求实现二级联动效果.背景为:通过学院的选择,联动出专业选项.起初想直接用微软的控件实现Ajax效果,但是DropDownList控件会自动触发PostBack,在后台根本就不好控制, ...

  8. js：二级联动示例

    联动原理 当用户点击省级的下拉选项,选择所在省,下一个下拉选项里的选项,则变成用户选择省下的所有市的信息,不会出现其它省市的信息. 省市数据 把省市数据,保存在js文件中,以json形式保存,以便读取 ...

  9. js小例子之二级联动

    联动原理 当用户点击省级的下拉选项,选择所在省,下一个下拉选项里的选项,则变成用户选择省下的所有市的信息,不会出现其它省市的信息. 省市数据 把省市数据,保存在js文件中,以json形式保存,以便读取 ...

随机推荐

  1. UE4物理笔记

    基本 物理资源随骨骼创建,可添加到骨骼网格上. 物理材质可添加到材质或组件或物理资源上. 通过配置PrimitiveComponent组件的Collision Presets值,可实现自定义的碰撞忽略 ...

  2. 使用以太网通信方式刷新AB PLC固件

    本文详细介绍如何使用以太网通信方式刷新AB PLC固件 一.准备工作 1.  AB PLC控制器一台,本文以5069-L330ER为例,将其通电: 2.  5069-L330ER的IP已设置为172. ...

  3. python+redis+kairosdb+cassandra+mysql环境搭建

    环境搭建: python安装: redis安装: 下载.解压.安装 1.wget http://download.redis.io/releases/redis-5.0.0.tar.gz 2.tar ...

  4. sql注入--双查询报错注入

    sql注入--双查询报错注入 背景:在sqli-labs第五关时,即使sql语句构造成功页面也没有回显出我们需要的信息,看到了有使用双查询操作造成报错的方式获得数据库信息,于是研究了一下双查询的报错原 ...

  5. 2018-2019-2 20165234 《网络对抗技术》 Exp1 PC平台逆向破解

    实验一 PC平台逆向破解 实验目的 本次实践的对象是一个名为pwn1的linux可执行文件. 该程序正常执行流程是:main调用foo函数,foo函数会简单回显任何用户输入的字符串. 该程序同时包含另 ...

  6. 【Android手机测试】linux内存管理 -- 一个进程占多少内存？四种计算方法：VSS/RSS/PSS/USS

    在Linux里面,一个进程占用的内存有不同种说法,可以是VSS/RSS/PSS/USS四种形式,这四种形式首字母分别是Virtual/Resident/Proportional/Unique的意思. ...

  7. codeforces 1151 B

    codeforces 1151  B codeforces 1151  B  1600fen 题意:n*m的矩阵,问能否从n行中每行选一个数 异或 大于0 解析:刚开始看没思路,想用dfs跑一遍,看到 ...

  8. [Kubernetes]资源模型与资源管理

    作为 Kubernetes 的资源管理与调度部分的基础,需要从它的资源模型说起. 资源管理模型的设计 我们知道,在 Kubernetes 里面, Pod 是最小的原子调度单位,这就意味着,所有和调度和 ...

  9. elk的备份与恢复【转】

    elasticsearch提供了快照功能: 1.在elsticsearch的配置文件中定义一个path.repo路径配置 path.repo: ["/elk/my_backup"] ...

  10. docker-compose部署ELK

    本章基于 https://www.cnblogs.com/lirunzhou/p/10550675.html 在此基础上将ELK系统docker-compose.yml化. 其docker-compo ...