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. 【NLP】

  2. petite-vue源码剖析-双向绑定`v-model`的工作原理

    前言 双向绑定v-model不仅仅是对可编辑HTML元素(select, input, textarea和附带[contenteditable=true])同时附加v-bind和v-on,而且还能利用 ...

  3. tp5文件上传实现缩略图+水印的功能(参考)

    public function AddNews(){ $data = Request::instance()->param(); //接收文件 $file = request()->fil ...

  4. 『现学现忘』Docker基础 — 28、Docker容器数据卷介绍

    目录 1.什么是Docker容器数据卷 2.数据卷的作用 3.数据卷的使用 1.什么是Docker容器数据卷 Docker容器数据卷,即Docker Volume(卷). 当Docker容器运行的时候 ...

  5. 6月5日 python复习 模块

    """1. os和sys都是干什么的?2. 你工作中都用过哪些内置模块?3. 有没有用过functools模块?"""1. os 系统相关 ...

  6. Java单例模式示范

    package com.ricoh.rapp.ezcx.iwbservice.util; import java.util.ArrayList; import java.util.List; impo ...

  7. MyBatis与Hibernate有哪些不同?

      (1)Mybatis和hibernate不同,它不完全是一个ORM框架,因为MyBatis需要程序员自己编写Sql语句. (2)Mybatis直接编写原生态sql,可以严格控制sql执行性能,灵活 ...

  8. 什么是线程池(thread pool)?

    在面向对象编程中,创建和销毁对象是很费时间的,因为创建一个对象要获取内 存资源或者其它更多资源.在 Java 中更是如此,虚拟机将试图跟踪每一个对象, 以便能够在对象销毁后进行垃圾回收.所以提高服务程 ...

  9. 用maven建立一个工程4

    在命令行里面输入cd C:\Users\admin\Documents\hello 然后按回车 再输入这行代码 mvn archetype:generate -DgroupId=com.liyongz ...

  10. cpu内部组成

    计算机系统的硬件结构主要由四部分组成:控制器.运算器.内存和输入输出设备 其中,控制器和运算器统称为中央处理器.简称CPU.它是计算机硬件系统的指挥中心. 它包括控制器.运算器.寄存器三个部分,其中, ...