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. 二级py--day6数据库设计基础

    二级py-- 数据库设计基础 1.数据定义语言(DDL):该语言负责数据的模式定义与数据的物理存取构建 2.数据操纵语言(DML):该语言负责数据的操纵,包括查询及总删改等操作 3.数据控制语言(DC ...

  2. 微信小程序逐屏分页刷新

    wxml: <view class="page-section-spacing"> <view> <text>商家列表</text> ...

  3. [链表]LeetCode 25 K组一个翻转链表

    LeetCode 25 k组一个翻转链表 TITLE 示例 1: 输入:head = [1,2,3,4,5], k = 2 输出:[2,1,4,3,5] 示例 2: 输入:head = [1,2,3, ...

  4. Termux镜像在阿里云镜像站首发上线

    镜像下载.域名解析.时间同步请点击阿里云开源镜像站 简介 Termux 是 Android 平台上的一个终端模拟器,它将众多 Linux 上运行的软件和工具近乎完美的移植到了手机端. 无需任何复杂的安 ...

  5. WebGPU 计算管线、计算着色器(通用计算)入门案例:2D 物理模拟

    目录 1. WebGL 2. WebGPU 2.1. 适配器(Adapter)和设备(Device) 2.2. 着色器(Shaders) 2.3. 管线(Pipeline) 2.4. 并行(Paral ...

  6. 廖雪峰Python实战day1

    一.按照廖雪峰的教程,安装开发环境,问题不大. 1.异步框架aiohttp:$pip3 install aiohttp 2.前端模板引擎jinja2:$ pip3 install jinja2 3.安 ...

  7. 在Spring的事务体系中,事务传播特性:Required和RequiresNew有何不同?

    Required 如果当前存在一个事务,则加入当前事务.如果不存在任何事务,则创建一个新的事务.总之,要至少保证在一个事务中运行.PROPAGATION_REQUIRED通常作为默认的事务传播行为.p ...

  8. JDBC如何解决乱码

    只要在连接URL字符里添加参数 ?useUnicode=true&characterEncoding=utf-8 完整的URL字符串如下: 1 String url = "jdbc: ...

  9. JDBC 能否处理 Blob 和 Clob?

    Blob 是指二进制大对象(Binary Large Object),而 Clob 是指大字符对象 (Character Large Objec),因此其中 Blob 是为存储大的二进制数据而设计的, ...

  10. 如果一个表有一列定义为 TIMESTAMP,将发生什么?

    每当行被更改时,时间戳字段将获取当前时间戳. 列设置为 AUTO INCREMENT 时,如果在表中达到最大值,会发生什么情况? 它会停止递增,任何进一步的插入都将产生错误,因为密钥已被使用. 怎样才 ...