npm 安装

npm install v-distpicker --save

Vue全局引入组件

import Distpicker from 'v-distpicker'

Vue.component('v-distpicker', Distpicker)

也可以那里需要,哪里引入

import VDistpicker from 'v-distpicker'

export default {
components: { VDistpicker }
}
<v-distpicker province="广东省" city="广州市" area="海珠区"></v-distpicker>

在声明vue实例的时候,定义 一个onSelected方法

<v-distpicker province="广东省" city="广州市" area="海珠区" @selected="onSelected"></v-distpicker>

onSelected(data) {
this.address.province = data.province.value
this.address.city = data.city.value
this.address.county = data.area.value
},

  

vue实现省市区三级联动的更多相关文章

  1. vue 引用省市区三级联动(插件)

    vue 用省市区三级联动之傻瓜式教程(复制粘贴即用) npm 下载 npm install v-distpicker --save main.js //引入 省市区三级联动 import Distpi ...

  2. vue 引用省市区三级联动(element-ui Cascader)

    npm 下载 npm install element-china-area-data -S main.js import {provinceAndCityData,regionData,provinc ...

  3. vue 引用省市区三级联动(element-ui select)

    npm 下载 axios npm install --save axios static 静态文件夹里 创建 json 文件夹 json 文件夹里创建 map.json map.json 文件里写 ( ...

  4. 基于Vue的省市区三级联动插件

    官网地址:https://distpicker.uine.org/ 安装: npm install v-distpicker --save 局部注册: import VDistpicker from ...

  5. vue仿京东省市区三级联动选择组件

    工作中需要一个盒京东购物车地址选择相似的一个省市区三级联动选择组件,google查了下都是下拉框形式的,于是自己写了一个,希望对使用vue开发项目的朋友有帮助,显示效果如下:使用vue2.0开发 ht ...

  6. vue省市区三级联动

    仿照小米之家做的一个省市区三级联动,先上代码: HTML: <template> <section class="myAddress"> <secti ...

  7. JS实现年月日三级联动+省市区三级联动+国家省市三级联动

    开篇随笔:最近项目需要用到关于年月日三级联动以及省市区三级联动下拉选择的功能,于是乎网上搜了一些做法,觉得有一些只是给出了小的案例或者只有单纯的js还不完整,却很难找到详细的具体数据(baidu搜索都 ...

  8. Vue 国家省市三级联动

    在网上查阅一下,基本上是省市区三级联动,国家省市的就只能自己动手了. 样式就根据自己的需要去调整了. JSON数组太长,就折叠放在了后面. 效果图: <!DOCTYPE html> < ...

  9. jQuery省市区三级联动插件

    体验效果:http://hovertree.com/texiao/bootstrap/4/支持PC和手机移动端. 手机扫描二维码体验效果: 代码如下: <!DOCTYPE html> &l ...

随机推荐

  1. 微信小程序结合 tp实现秒杀

    一:建表 1:用户表 2:订单表 3:收货地址 4:秒杀的商品表: 二: 微信后台方法 1 /** 2 * 秒杀接口 3 */ 4 public function seckill(Request $r ...

  2. Go值类型和引用类型+作用域+空白标识符+常量

    值类型和引用类型 所有像 int.float.bool 和 string 这些基本类型都属于值类型,使用这些类型的变量直接指向存在内存中的值: 当使用等号 = 将一个变量的值赋值给另一个变量时,如:j ...

  3. 监督学习,无监督学习常用算法集合总结,引用scikit-learn库(监督篇)

    why写这篇blog 最近在接触这方面的知识,但是找了许多的笔记,都感觉没有很好的总结出来,也正好当做是边学习,边复习着走.大佬轻喷.参考书目<python机器学习基础教程> 将分别从以下 ...

  4. hive从入门到放弃(三)——DML数据操作

    上一篇给大家介绍了 hive 的 DDL 数据定义语言,这篇来介绍一下 DML 数据操作语言. 没看过的可以点击跳转阅读: hive从入门到放弃(一)--初识hive hive从入门到放弃(二)--D ...

  5. 一些Docker 操作集合

    基本 显示所有容器(包括已停止): docker container ls -a 删除所有容器: docker stop $(docker ps -q) docker rm $(docker ps - ...

  6. Joplin开源笔记软件使用入门

    Joplin是一款开源免费的笔记软件,可以记录笔记.待办清单,支持Markdown,可导出Markdown格式.HTML格式.PDF格式的文档,具备自动同步功能,可定时自动备份到文件系统或网盘. Jo ...

  7. JSP和Servlet有哪些相同点和不同点?

    JSP是Servlet技术的扩展,本质上是Servlet的简易方式,更强调应用的外表表达.JSP编译后是"类servlet". Servlet和JSP最主要的不同点在于,Servl ...

  8. JVM 内存 (堆(heap)、栈(stack)和方法区(method) )

    JVM 内存初学 (堆(heap).栈(stack)和方法区(method) ) 堆区: 1.存储的全部是对象,每个对象都包含一个与之对应的class的信息.(class的目的是得到操作指令)2.jv ...

  9. 实践中如何优化 MySQL ?

    最好是按照以下顺序优化: 1.SQL 语句及索引的优化 2.数据库表结构的优化 3.系统配置的优化 4.硬件的优化 详细可以查看 阿里 P8 架构师谈:MySQL 慢查询优化.索引优化.以及表等优化

  10. 什么是基于 Java 的 Spring 注解配置?

    基于 Java 的配置,允许你在少量的 Java 注解的帮助下,进行你的大部分 Spring 配置而非通过 XML 文件. 以@Configuration 注解为例,它用来标记类可以当做一个 bean ...