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. 【爬虫】python爬虫

    爬虫章节 1.python如何访问互联网 URL(网页地址)+lib=>urllib 2.有问题查文档:python document. 3.response = urllib.request. ...

  2. composer 自动载入的四种方式

    对于第三方包的自动加载,Composer提供了四种方式的支持,分别是 PSR-0和PSR-4的自动加载,生成class-map,和直接包含files的方式. 首先引入autoload.php,在主文件 ...

  3. Jira8.0.2安装及破解

    最近开发部总监需要部署JIRA管理项目,就安装了一个JIRA8.5.7版安装并破解后,有天断电重启了,发现启动不了提示连接不上数据库.后来我又换了台机器重新安装后又进行了重启发现此破解版本存在问题.并 ...

  4. LGP4456题解

    我就是不用矩阵快速幂! 题意:一个 \(\rm 01\) 序列为合法的当且仅当没有两个相邻的 \(1\),若 \(1\) 的个数为 \(x\),\(0\) 的个数为 \(y\),这个 \(\rm 01 ...

  5. BBS项目分布搭建五(评论相关功能实现)

    BBS项目分布搭建五(评论相关) 1. 根评论逻辑实现 # 在models.py文件中 修改: # 7. 评论表 parent = models.ForeignKey(to='self', null= ...

  6. Java基础——Arrays类

    概述: Arrays类包含用于操作数组的各种方法,常用的有以下几种 方法名 说明 public static String toString(int[]a) 返回指定数组的内容的字符串表达形式 pub ...

  7. Centos7下开启防火墙,允许通过的端口

    1.查看防火墙状态 systemctl status firewalld 2.如果不是显示active状态,需要打开防火墙 systemctl start firewalld 3.# 查看所有已开放的 ...

  8. luffy项目中关于APIView的使用

    views中 from rest_framework.views import APIView from django.shortcuts import HttpResponse from api.u ...

  9. JDK,JRE,JVM的作用及关系

    1.作用 JVM:Java虚拟机,保证Java语言跨平台 JRE:Java程序的运行环境 JDK:Java程序的开发环境 2.关系 JRE:JVM+类库 JDK:JRE+工具

  10. 如何确保消息正确地发送至 RabbitMQ?如何确保消息接收方消费了消息?

    发送方确认模式 将信道设置成 confirm 模式(发送方确认模式),则所有在信道上发布的消息都会被指派一个唯一的 ID.一旦消息被投递到目的队列后,或者消息被写入磁盘后(可持久化的消息),信道会发送 ...