vue三级联动
<select @change="getArea(province_id,1)" v-model="province_id">
<option value="">请选择省</option>
<option v-for="item in province" :value="item.area_id">{{item.area_name}}</option>
</select>
<select @change="getArea(city_id,2)" v-model="city_id">
<option value="">请选择市</option>
<option v-for="item in city" :value="item.area_id">{{item.area_name}}</option>
</select>
<select v-model="country_id">
<option value="">请选择区/县</option>
<option v-for="item in country" :value="item.area_id">{{item.area_name}}</option>
</select>
app = new Vue({
el: '#app',
data: {
province: [],
city: [],
country: [],
},
methods: {
getArea: function(id, type) {
var that = this;
flyPost('api/index/getarea', {
_ajax: 1,
id: id
}).then(function(res) {
console.log(id);
if (res.code == 1) {
if (id == 0) {
that.province = res.data;
} else {
if (type == 1) {
that.city = res.data;
} else if (type == 2) {
that.country = res.data;
}
}
} else {
showAlert({
title: '提示',
message: res.msg
});
}
}.bind(this)).catch(function(err) {
//console.log(err);
});
}
},
mounted: function() {
var that = this;
that.getArea(that.id);
}
})
vue三级联动的更多相关文章
- 【巷子】---vue基于mint-ui三级联动---【vue】
一.基本配置 https://github.com/modood/Administrative-divisions-of-China 三级联动数据地址 二.vue基本配置 1.cnpm install ...
- 用vue实现省市县三级联动
我真的没想到这个会困扰到我.最开始以为,不就是直接找个简单的插件就实现了吗,jquery插件找了几个,都没有达到目的. 需求是这样的: 点击input框,弹出一个popup,然后可以滚动选择省,市,县 ...
- vue仿京东省市区三级联动选择组件
工作中需要一个盒京东购物车地址选择相似的一个省市区三级联动选择组件,google查了下都是下拉框形式的,于是自己写了一个,希望对使用vue开发项目的朋友有帮助,显示效果如下:使用vue2.0开发 ht ...
- 在vue中如何实现购物车checkbox的三级联动
最近用vue写一个电商项目,自然就少不了要写一个购物车的相关页面,功能完整的购物车的checkbox应该是三级联动的,1级checkbox是选中购物车中所有的商品,2级checkbox是选中某个店铺下 ...
- Vue如何使用vue-area-linkage实现地址三级联动效果
很多时候我们需要使用地址三级联动,即省市区三级联动.网上有很多插件,在此介绍Vue的一款地区联动插件:vue-area-linkage,下面介绍如何使用这个插件实现地址联动效果: 1. ...
- vue移动端地址三级联动组件(一)
vue移动端地区三级联动 省,市,县.用的vue+mintUi 因为多级联动以及地区的规则比较多.正好有时间自己写了一个.有问题以及建议欢迎指出.涉及到dom移动,所以依赖vue+jquery.这边数 ...
- vue中的三级联动
1.template里面的内容 2.js里面的内容 3.函数怎么写? 这是一个省市区的三级联动,首先你要传递中国的id,这样才能获取到所有的省份,所以在vue的项目中,我需要发一次进页面就请求(来得到 ...
- Vue 国家省市三级联动
在网上查阅一下,基本上是省市区三级联动,国家省市的就只能自己动手了. 样式就根据自己的需要去调整了. JSON数组太长,就折叠放在了后面. 效果图: <!DOCTYPE html> < ...
- 省市区三级联动(vue)
vue项目中使用到三级联动,现在自己实现一个三级联动,仅供大家参考一下,直接上代码. <template> <section class="container"& ...
随机推荐
- Week_10 C
拓扑排序 Week_10 C 题意:输入n行数据a,b ,表示a的钱数大于b的钱数,最低的人分的的钱数为888,问最少需要多少钱可以分给员工 思路:标准的拓扑排序,不过这题需要逆向拓扑 注意点 ...
- Gitlab_ansible_jenkins三剑客③Ansible的安装及使用
一台服务器可能会安装不同的python应用,不同的应用可能使用的模块版本不同,如果都安装在同样的环境下容易冲突,为了避免冲突,引入virtualenv 这个包管理工具进行环境的隔离 使用pip安装之前 ...
- Light OJ 1343 - Aladdin and the Black Stones
题目 link 求偶数子序列 满足 的个数. 分析 首先, 我们先把每一对a[i] + a[j]存起来, 这样就可以把题目的偶数个条件无视了. 设 T[i,j] = a[i] + a[j]; 因为我们 ...
- Linux下执行自定义的可执行命令无效原因
1 前言 用golang编译成可执行文件tt stats text.txt(tt 是编译后重命名的可执行文件),然后直接执行失败了,后来使用./tt stats text.txt可以了. 执行结果如下 ...
- I - Beautiful People ZOJ - 2319 (二分法)
The most prestigious sports club in one city has exactly N members. Each of its members is strong an ...
- 如何实现python连续输入
题型:输入矩阵,求对角线之和 思路(模型): i=0 while i<3: x=input() i+=1 print(x) 可以实现输入三行,最后输出最后一个x x=int(input()) m ...
- python3与mysql交互
1.安装pymysql模块 pip3 install pymysql3 2.pymysql的简单使用: # /usr/bin/env python3 import pymysql class Mysq ...
- 总zabbix配置-搭建-邮件报警-微信报警-监控mysql
Centos7安装Zabbix4.0步骤 官方搭建zabbix4.0的环境要求: 1. 环境搭建LAMP 前提Centos系统安装完成: 确认一下: 1 2 cat /etc/redhat-rele ...
- Java 自定义注释@interface的用法
最简单的待校验的注解定义 @Documented @Constraint(validatedBy = ExistBlankByListValidator.class) @Target({PARAMET ...
- Win10 iot 配置防火墙限制应用部署
最近在玩树莓派接大触摸屏 发现一个问题,vs 在 iot 上部署应用,使用的是 Universal (Unencrypted Protocol) https://docs.microsoft.com/ ...