vue 地区选择器v-distpicker的常用功能

今天给大家推荐一款好用的vue插件，地区选择器 v-distpicker ，接下来我给大家介绍一些常用的功能

1.引入插件(截图官网并解释)

2.使用插件(截图官网并解释)

就是这么简单，只需写个<v-distpicker></v-distpicker>标签，就会出现地区选择器，并且全国匹配城市(有插件就是好，直接拿来用)

3.与后端进行接口联调------------- 重点来啦！！！

前端之所以使用 地区选择器 ，目的就是为了提交用户选择的地区信息，最终通过接口传递给后端人员处理(某些时刻，我们只是数据的搬运工~)

代码如下：

解释：

1.通过这三个事件，监听用户输入省 市 区的信息；

2.在省监听事件中console信息，输出了一个对象(插件已封装好的数据)，并获取该对象的value属性值；

3.this.formValidate是我初始化的对象，之后把获取的信息放入formValidate对象，最终一起提交给后端(axios请求)， 大功告成！

收尾

以上所述是小编给大家介绍的vue 地区选择器v-distpicker的常用功能,希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对我们网站的支持！
如果你觉得本文对你有帮助，欢迎转载，烦请注明出处，谢谢！

赞 (0)

相关推荐

  • 详解VUE-地区选择器(V-Distpicker)组件使用心得

    废话不多说,直接进入正题. 安装,引用,这些直接从官网拷贝来的,就不多说了. 1.安装 使用 npm 安装: npm install v-distpicker --save 使用 yarn 安装 yarn add v-distpicker --save 2.使用 注册组件 注册全局组件 import VDistpicker from 'v-distpicker' Vue.component('v-distpicker', VDistpicker); 注册组件 import VDistpicker

  • vue 地区选择器v-distpicker的常用功能

    今天给大家推荐一款好用的vue插件,地区选择器 v-distpicker ,接下来我给大家介绍一些常用的功能 1.引入插件(截图官网并解释) 2.使用插件(截图官网并解释) 就是这么简单,只需写个<v-distpicker></v-distpicker>标签,就会出现地区选择器,并且全国匹配城市(有插件就是好,直接拿来用) 3.与后端进行接口联调------------- 重点来啦!!! 前端之所以使用 地区选择器 ,目的就是为了提交用户选择的地区信息,最终通过接口传递给后端人员处

  • jQuery+vue.js实现的多选下拉列表功能示例

    jQuery+vue.js实现的多选下拉列表功能示例

    本文实例讲述了jQuery+vue.js实现的多选下拉列表功能.分享给大家供大家参考,具体如下: 其实就是实现一个多选下拉列表,然后将选中的选项显示到相应的位置: 因为主要是jQuery选中行为的实现,所以,样式结构就不多说啦,直接贴代码啦: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewpo

  • JS实现经典的中国地区三级联动下拉菜单功能实例【测试可用】

    JS实现经典的中国地区三级联动下拉菜单功能实例【测试可用】

    本文实例讲述了JS实现经典的中国地区三级联动下拉菜单功能.分享给大家供大家参考,具体如下: 1.首先是js文件(area.js): function Dsy() { this.Items = {}; } Dsy.prototype.add = function(id,iArray) { this.Items[id] = iArray; } Dsy.prototype.Exists = function(id) { if(typeof(this.Items[id]) == "undefined&q

  • 很全面的JavaScript常用功能汇总集合

    很全面的JavaScript常用功能汇总集合

    本文主要总结了JavaScript 常用功能总结,如一些常用的额JS 对象,基本数据结构,功能函数等,还有一些常用的设计模式.  目录: 众所周知,JavaScript是动态的面向对象的编程语言,能够实现以下效果: 丰富Web 网页功能 丰富Web界面 实现本地或远程存储. 实现分布式网络应用的前端组件,并在后台进行数据存储管理. 使用JavaScript可以实现完整的分布式Web 应用.  一.JavaScript 中的数据类型 JavaScript 提供三种元数据类型,string,numb

  • vue实现的仿淘宝购物车功能详解

    vue实现的仿淘宝购物车功能详解

    本文实例讲述了vue实现的仿淘宝购物车功能.分享给大家供大家参考,具体如下: 下面是一张众所周知的淘宝购物车页面,今天要讲解的案例就是用vue.js做一个类似的页面 首先简单介绍一下可能会用到的一些vue.js的用法: v-bind,绑定属性:例如v-bind:class="{'class1':flag}",这是常用的绑定样式的方法,如果flag为true则class=class1:v-bind:src="image",image就是图像的路径; v-if=&quo

  • Vue的H5页面唤起支付宝支付功能

    目前项目中比较常用的第三方支付无非就是支付宝支付和微信支付.下面介绍一下Vue中H5页面如何使用支付宝支付.其实很简单的,只不过是调自己后台的一个接口而已(后台根据支付宝文档,写好支付接口). 触发支付宝支付调用后台接口,后台会返回支付宝提供的form表单,我们只要在vue里面创建新节点,将返回的form表单append进去,并提交就可以唤起支付宝支付.另在此说一下这个 returnUrl , 它是支付后支付宝回调的页面.具体可以根据自身业务,后台写死或者由前端控制. methods () {

  • 详解linux系统输入输出管理和vim的常用功能

    ####系统中输入输出的管理#### 1.理解系统的输入输出重定向 输入重定向是指把文件导入到命令中,而输出重定向则是把原本要输出到屏幕的数据信息写入到指定文件中. 2.管理输入输出的符号 ##输出重定向 >       ##重定向正确输    2>       ##重定向错误输出    &>       ##重定向所有输出 注意: 重定向会覆盖原文件内容 >>     ##不会覆盖原文件内容    2>>     ##错误输出,不覆盖    &&

  • vue开发移动端底部导航条功能

    效果图 src/app.vue <template> <div id="app" class="g-container"> <div class="g-header-container"> 头部导航 </div> <div class="g-view-container"> <div class="content"> 内容区域 <

  • Vue通过Blob对象实现导出Excel功能示例代码

    不同的项目有不同的导出需求,有些只导出当前所显示结果页面的表格进入excel,这个时候就有很多插件,比如vue-json-excel或者是Blob.js+Export2Excel.js来实现导出Excel功能.但是有些需求因为数据量太大,成千上万条数据,所以是需要后端拼接,然后输出二进制流文件,然后前端直接下载,这次我们谈谈后者的做法. Blob对象表示一个不可变.原始数据的类文件对象,通常我也叫它二进制流对象.我们可以通过Blob对象实现导出Excel功能,先放上代码: <el-button

  • 基于vue与element实现创建试卷相关功能(实例代码)

    基于vue与element实现创建试卷相关功能(实例代码)

    由于最近在一个项目中需要实现创建试卷与预览试卷的功能,所以就自己动手写了一个,效果还不错,目前项目已经交付使用,今天就先和大家分享一下创建试卷. 创建试卷 先放一下效果图 首先是试卷的相关设置 考试对象是通过接口返回的数据 <span class="content-label">选择考试对象</span> <el-form-item prop="roleList"> <el-select v-model="form

随机推荐