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

<!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. LeetCode刷题-005最长回文子串

    给定一个字符串 s,找到 s 中最长的回文子串.你可以假设 s 的最大长度为1000.示例 1:输入: "babad"输出: "bab"注意: "ab ...

  2. Python 高级特性之：生成器（generator）和迭代器（Iterator）

    前言: 之前学习Python自动化,接触了不少python的学习,对生成器印象尤其深,网上也看了很多介绍,下面主要是这些概念的个人学习整理(如侵删). 正文: 如要创建一个非常大的列表,受到内存限制, ...

  3. python数字常量

    数学常量 pi 数学常量 pi(圆周率,一般以π来表示) e 数学常量 e,e即自然常数(自然常数).

  4. Power BI行级别安全性(数据权限管理)

    自从PowerBI 的DAX 函数 支持username() 或 userprincipalname()的函数后,我们就可以在Power BI中实现根据用户的行级数据权限的控制. username() ...

  5. k8s部署etcd数据库集群

    ⒈下载 https://github.com/etcd-io/etcd/releases ⒉解压 tar -zxvf etcd-v3.3.12-linux-amd64.tar.gz ⒊移动可执行文件及 ...

  6. 一个简单的go语言爬虫

    package main import ( "bufio" "fmt" "golang.org/x/net/html/charset" &q ...

  7. CentOS 7.2 Ubuntu 18部署Rsync + Lsyncd服务实现文件实时同步/备份

    发送端配置: 一.配置密钥 1. 主/从服务器之间启用基于密钥的身份验证.登录发送端服务器并用 " ssh-keygen " 命令生成公共或私有的密钥. 2. 使用 " ...

  8. 【easy】530. Minimum Absolute Difference in BST

    找BST树中节点之间的最小差值. /** * Definition for a binary tree node. * struct TreeNode { * int val; * TreeNode ...

  9. qml layout

    一.使用总结 1.锚点:锚点锚在父控件左边anchors.left: parent.left ,才可以设置anchors.leftMargin:20 才有作用,设置anchors.topMargin: ...

  10. Codeforces Round #352 (Div. 2) (A-D)

    672A Summer Camp 题意: 1-n数字连成一个字符串, 给定n , 输出字符串的第n个字符.n 很小, 可以直接暴力. Code: #include <bits/stdc++.h& ...