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

<!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. Nodejs一键实现微信内打开网页url自动跳转外部浏览器访问的功能

    前言 现如今微信对第三方推广链接的审核是越来越严格了,域名在微信中分享转发经常会被拦截,一旦被拦截用户就只能复制链接手动打开浏览器粘贴才能访问,要不然就是换个域名再推,周而复始.无论是哪一种情况都会面 ...

  2. java笔试要点（java.sql包）

    提供JAVA存取数据库能力的包是 ( ) A: java.sql B: java.awt C: java.lang D: java.swing 解析: A,java.sql包提供Java存取数据库能力 ...

  3. Corn Fields POJ - 3254 （状压dp）

    题目链接: Corn Fields  POJ - 3254 题目大意:给你一个n*m的矩阵,矩阵的元素只包括0和1,0代表当前的位置不能放置人,1代表当前的位置可以放人,当你决定放人的时候,这个人的四 ...

  4. 2018-2019-2 20165234 《网络对抗技术》 Exp5 MSF基础应用

    实验五 MSF基础应用 实验内容 本实践目标是掌握metasploit的基本应用方式,重点常用的三种攻击方式的思路.具体需要完成: 1.一个主动攻击实践,ms08_067(成功) 2. 一个针对浏览器 ...

  5. JavaWeb之html

    html :Hyper Text Markup Language 超文本标记语言 超文本:比文本功能更加强大 标记语言:通过一组标签对内容进行描述的一门语言 html书写规则: 文件的后缀名:.htm ...

  6. mac 终端里进入mysql和退出

    先在偏好设置里启动mysql服务 获取超级权限 在终端输入代码 sudo su 输入完后获取超级权限 终端显示 sh-3.2# 输入本机密码(Apple ID密码) 接着通过绝对路径登陆 代码 /us ...

  7. Harbor修改/data目录位置

    由于harbor默认数据存储位置在/data目录,且修改配置文件操作较为复杂,故这里使用软连接的方式将/data目录文件夹内容映射到/app目录下. ln -s /app/harbor/data/ d ...

  8. Android运行时权限

    Android 6.0加入了运行时权限这一概念.对于危险权限,应用必须在使用的时候进行申请.可以使用命令行查看危险权限:adb shell pm list permissions -d -g CALE ...

  9. P4098 [HEOI2013]ALO

    最近这个家伙去哪了,为啥一直不更博客了呢?原来他被老师逼迫去补了一周的文化课,以至于不会把班里的平均分拉掉太多.好了,我们来看下面这道题目: P4098 [HEOI2013]ALO 题目描述 Welc ...

  10. syntax error near unexpected token `do(写的shell脚本出现格式问题)--->1.问题2.展示信息3.解决方案

    1问题:Linux和windows下的回车换行符不兼容的问题 [root@node-01 script]# sh start_zk.sh art_zk.sh: line 3: syntax error ...