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

<!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. 开启IIS的WebGarden、WebFarm和StateServer之旅

    前言 公司系统虽然配置有1台NLB后拖4台App Server最后搭一台强劲无比的DB Server,但每天下午4点左右总被投诉系统慢,报表下载不了等问题.究其原因,原来NLB采用锁定sessionI ...

  2. Python:正则表达式(一):search()、match()、findall() 的区别

    以前一直觉得正则很难,不会用,今天试验了几个方法,整理总结了一下,简洁明了. 简单来讲,正则就是 提取一段特征数据,用(.*?)代替. 自己总结的特点&区别: (.*) 贪婪匹配,会尽可能的往 ...

  3. 前端DES加密

    /** * DES加密/解密 * @Copyright Copyright (c) 2018 * @author mrDu * @see DESCore */ /* * encrypt the str ...

  4. ZOJ 3604 Tunnel Network(凯莱定理)

    题目链接: E - Tunnel Network ZOJ - 3604 题目大意: 给定编号1-n的点,和给定编号1-S 的联通图,刚开始1号联通图只有 1个顶点,就是编号为1的顶点,2号联通图也只有 ...

  5. HDU - 1050

    wa了5遍?!! (1)前4遍,思路没简化,企图模拟整个过程,但是调用sort函数时由于没有把奇数的屋子和偶数的屋子统一,排序出了问题. 思路:遍历n段,每次只扫未被标记过的一段,ans++并且从该段 ...

  6. Git管理源代码

    Git Git 是目前世界上最先进的分布式版本控制系统(没有之一) 作用 源代码管理 为什么要进行源代码管理? 方便多人协同开发 方便版本控制 Git单人本地仓库操作 安装git sudo apt-g ...

  7. [转] golang中struct、json、map互相转化

    一.Json和struct互换 (1)Json转struct例子: type People struct { Name string `json:"name_title"` Age ...

  8. 终极版:Mybatis整合Spring配置

    第一部分:配置 Spring 框架 配置 SpringMVC 的步骤: 配置流程图: SpringMVC 配置 1. 导入包(那些包,基本包 5 个,1 个日志依赖包,2 个 webmvc 支持包) ...

  9. python-数据类型之题型

    1.让用户输入任意字符串,获取字符串之后并计算其中有多少个数字. total = 0 text = input("请输入内容") a = 0 while a <len(tex ...

  10. 在服务器上实现SSH(Single Stage Headless)

    服务器上ssh实现 写在前面:这只是我在服务器上的环境实现的,仅供参考.要根据自己系统的环境做出修改. ==github源码(https://github.com/mahyarnajibi/SSH)= ...