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

<!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. 【翻译】 Guice 动机——依赖注入的动机

    原文链接 动机 将所有的内容连接在一起时应用开发的一个单调乏味的部分.有几种方式来将数据.服务.presetntation类连接到一起.为了对比这些方法,我将为披萨订购网站编写账单代码: public ...

  2. 基于范围的for循环(C++11)

    C++11新增了一种循环:基于范围的for循环.这简化了一种常见的循环任务:对数组(或容器类,如vector和array)的每个元素执行相同的操作,如下例所示 for语句允许简单的范围迭代:(只遍历, ...

  3. python3.4 + pycharm 环境安装 + pycharm使用

    因个人是windows的环境,所以本文只讲windows环境下的python安装. 作为初用python的盆友,强烈建议只在电脑上装一个python版本就好了,不然就进了各种坑里了. 第一步:下载和安 ...

  4. dubbo直连提供者 & 只订阅 & 只注册

    1.    dubbo直连提供者 在开发及测试环境下,经常需要绕过注册中心,只测试指定服务提供者,这时候可能需要点对点直连,点对点直连方式,将以服务接口为单位,忽略注册中心的提供者列表,A 接口配置点 ...

  5. 如何在submit上运行php文件

    一..把php加入到环境变量 二.在sublmie中新建编译系统 三.添加一下代码,修改成php当前的目录地址,保存在默认的路径下,命名为php.sublime-build { "cmd&q ...

  6. mac配置变量失败导致ls命令都失效

    1.在命令行中输入 export PATH=/usr/bin:/usr/sbin:/bin:/sbin:/usr/X11R6/bin 这样可以保证命令行命令暂时可以使用.命令执行完之后先不要关闭终端 ...

  7. EntityFramework6之原生SQL

    原文:https://www.cnblogs.com/wujingtao/p/5412329.html 用EF执行SQL又比ADO.NET方便,特别是在执行查询语句的时候,EF会把查询到的数据自动保存 ...

  8. 使用 eclipse 的常用操作

    1.创建项目 https://blog.csdn.net/tsundere_ning/article/details/79587060 2. 常用代码块创建编辑 使得eclipse 相应, 点击右上角 ...

  9. unity 使用RotateAround的使用注意

    1.对于一个固定的点,围绕它进行旋转.需要注意区分世界坐标还是本地坐标 RotateAround(GameObject.Find("Cave").transform.positio ...

  10. js圆形头像实现

    定义CSS <style> .to{width:100px;height:100px;border-radius:100px} </style> 这样就实现了 主要是borde ...