vue 选城市三级联动
<div id="example">
<select v-model="prov">
<option v-for="option in arr" :value="option.name">
{{ option.name }}
</option>
</select>
<select v-model="city">
<option v-for="option in cityArr" :value="option.name">
{{ option.name }}
</option>
</select>
<select v-model="district" v-if="district">
<option v-for="option in districtArr" :value="option.name">
{{ option.name }}
</option>
</select>
</div> <script type="text/javascript">
var vm = new Vue({
el: '#example',
data: {
arr: arrAll,
prov: '北京',
city: '北京',
district: '东城区',
cityArr: [],
districtArr: []
},
methods: {
updateCity: function () {
for (var i in this.arr) {
var obj = this.arr[i];
if (obj.name == this.prov) {
this.cityArr = obj.sub;
break;
}
}
this.city = this.cityArr[1].name;
},
updateDistrict: function () {
for (var i in this.cityArr) {
var obj = this.cityArr[i];
if (obj.name == this.city) {
this.districtArr = obj.sub;
break;
}
}
if(this.districtArr && this.districtArr.length > 0 && this.districtArr[1].name) {
this.district = this.districtArr[1].name;
} else {
this.district = '';
}
}
},
beforeMount: function () {
this.updateCity();
this.updateDistrict();
},
watch: {
prov: function () {
this.updateCity();
this.updateDistrict();
},
city: function () {
this.updateDistrict();
}
}
})
</script>
城市json数据量比较大,完整案例请看:
vue 选城市三级联动的更多相关文章
- 城市三级联动 AJAX-原生js封装
话不多说我们先来一张效果图给大家看一下: html代码如下: <!DOCTYPE html><html lang="en"><head> < ...
- 全国城市三级联动 html+js
全国城市三级联动,没有css,所以屏幕的自适应必须自己想办法,手机端慎用(最好不要用,因为有些我也说不出的展示问题). html页面 <!DOCTYPE html> <html> ...
- jquery 城市三级联动
js代码 /*城市三级联动 * @method cityChange * @param allProvince,allCity,allDistrict */ function cityChange(p ...
- 转: javascript实现全国城市三级联动菜单代码
<html> <head> <title>js全国城市三级联动菜单代码_B5教程网</title> <meta http-equiv=" ...
- vue 引用省市区三级联动(插件)
vue 用省市区三级联动之傻瓜式教程(复制粘贴即用) npm 下载 npm install v-distpicker --save main.js //引入 省市区三级联动 import Distpi ...
- Vue 国家省市三级联动
在网上查阅一下,基本上是省市区三级联动,国家省市的就只能自己动手了. 样式就根据自己的需要去调整了. JSON数组太长,就折叠放在了后面. 效果图: <!DOCTYPE html> < ...
- AngularJS系列:表单全解(表单验证,radio必选,三级联动,check绑定,form提交验证)
一.查看$scope -->寻找Form控制变量的位置 Form控制变量 格式:form的name属性.input的name属性.$... formName.inputField.$pristi ...
- 【巷子】---vue基于mint-ui三级联动---【vue】
一.基本配置 https://github.com/modood/Administrative-divisions-of-China 三级联动数据地址 二.vue基本配置 1.cnpm install ...
- vue中的三级联动
1.template里面的内容 2.js里面的内容 3.函数怎么写? 这是一个省市区的三级联动,首先你要传递中国的id,这样才能获取到所有的省份,所以在vue的项目中,我需要发一次进页面就请求(来得到 ...
随机推荐
- collections 数据结构模块namedtuple
namedtuple类 导入模块 from collections import namedtuple 使用方法及说明 #pycharm 里按住 ctrl键点击 collections可查看源码 #c ...
- awk 处理文本:行转列,列转行
[root@centos ~]# cat f 1 2 3 4 5 1 2 3 4 5 1 2 3 4 5 1 2 3 4 51 2 3 4 5 awk '{for(i=1;i<=NF;i++)a ...
- Linux记录-文件格式
yum -y install dos2unix dos2unix filename
- excel怎么比较两组或两列数据的相同项和不同项
https://jingyan.baidu.com/article/c843ea0b7a2a7477921e4a47.html
- Good, then we can start
- ArcGis Python脚本——批量删除字段
注意,ArcGis中shp属性表至少要保留除OID(FID).Shape之外的1个字段. 例:批量删除“省级行政区域”除“FID”.“Shape”.“Area”之外的字段. import arcpy ...
- npm与yarn命令对比
Yarn是由Facebook.Google.Exponent 和 Tilde 联合推出了一个新的 JS 包管理工具 Yarn 是为了弥补 npm 的一些缺陷而出现的(比如,npm install时候会 ...
- Unable to find CMake in android studio
- man termios(FreeBSD 12.0)
TERMIOS() FreeBSD Kernel Interfaces Manual TERMIOS() NAME termios - general terminal line discipline ...
- Polymer初探
Polymer是什么? Polymer英文为 n.聚合物:多聚体 网络高分子:聚合体:高分子聚合物 应用在Web组件场景, 表达的是, 一个一个小的Web组件,可以通过此框架聚合为一个 整个页面. h ...