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

<!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. 论文阅读笔记（二）U-Net

    U-Net: Convolutional Networks for Biomedical Image Segmentation U-Net:用于生物医学图像分割的卷积网络 摘要 要想成功地训练一个深度 ...

  2. 论文阅读笔记（一）FCN

    本文先对FCN的会议论文进行了粗略的翻译,使读者能够对论文的结构有个大概的了解(包括解决的问题是什么,提出了哪些方案,得到了什么结果).然后,给出了几篇博文的连接,对文中未铺开解释的或不易理解的内容作 ...

  3. @Html.LabelFor 如何直接添加CSS样式

    样式用的是bootstrap. 我想单独调整一下其中一个控件的样式,大概这个造型. @Html.LabelFor(m => m.DerivationRate, new { @class = &q ...

  4. spring boot 框架设计步骤

    spring boot 框架设计步骤: 1.poem.xml配置 2.application.yml配置 3.entiry实体 4.realm.Myrealm extends AuthorizingR ...

  5. 两个MMCM共享时钟输入时的严重警告和错误

    情景描述: 芯片:zynq7020 问题: 设计从FPGA的U19引脚上的开发板板接收时钟输入125M,并将其送到两个MMCM.使用软件:vivado2015.4在Vivado中打开合成设计后,我得到 ...

  6. bently addin 二次开发学习

    元素结构: 一些基本元素的添加与绘制: class CreateElement { public static void LineAndLineString() { Application app = ...

  7. [吐槽]webpack4

    https://webpack.js.org/guides/tree-shaking/ https://www.webpackjs.com/guides/ 插件都过时被替代了,中文文档也没更新过来,坑 ...

  8. 十个推荐使用的 Laravel 的辅助函数

    壹. array_dot() array_dot () 辅助函数允许你将多维数组转换为使用点符号的一维数组. $array = [ 'user' => ['username' => 'so ...

  9. hostapd、/dev/random、/dev/urandom

    在使用hostapd做软ap时,出现了random熵不够的问题,导致节点连接不上这个ap. 下面先解释一下/dev/random和/dev/urandom 先让我们从一个工程中遇到的实际问题开始,先上 ...

  10. 【java】Java组件概览（2）— 基本库

    1.Math Math相关的库包括包括浮点库(java.lang.Math和java.lang.StrictMath)和任意精度数学(java.math包). (1)java.lang.Math 该类 ...