郑州网站建设,郑州网站制作,郑州做网站,巩义网站建设,荥阳网站建设,偃师网站制作-全栈网络

网站建设中如何使用vue完成省市三级联动表单的添加
当前位置:首页 > 建站技巧 > 网站代码 >

网站建设中如何使用vue完成省市三级联动表单的添加

时间: 2018-11-13 分类: 网站代码 浏览次数:

在网站建设中,使用vue来进行网站后台管理系统及前端的开发使用日益频繁,在一些文档编辑发布功能,用户资料设置位置经常会用到省市地域三级联动菜单选择,那么如何在vue项目中...

在网站建设中,使用vue来进行网站后台管理系统及前端的开发使用日益频繁,在一些文档编辑发布功能,用户资料设置位置经常会用到省市地域三级联动菜单选择,那么如何在vue项目中,快速搭建省市三级联动菜单功能呢?
 

 
使用vue框架进行网站建设的方便之处就在于可以随意使用大量网站插件,比如省市联动菜单就可以直接在vue脚手架中直接安装v-distpicker插件,此插件即为省市联动选择插件,高效便捷,以下我们进行代码演示:

1.在vue项目中安装插件,命令如下:
npm install v-distpicker --save

2.在vue中想设置省市联动的位置添加插件调用及声明,命令如下:
import VDistpicker from 'v-distpicker'(插件调用)
components: { PanThumb, GithubCorner ,appTinymce,VDistpicker},(插件声明)

3.添加对应调用标签,命令如下:
  <v-distpicker   @selected="onSelected" :province="temp.select.province" :city="temp.select.city" :area="temp.select.area"></v-distpicker>

4.添加data数据声明绑定,命令如下:

 select: {
         province: '河南省',
          city: '郑州市',
          area:'巩义市'
        },

5.添加函数进行监测数据操作变化,命令如下:

 onSelected:function (data) {
        this.temp.select.province=data.province.value
        this.temp.select.city=data.city.value
        this.temp.select.area=data.area.value
        console.log(data)
      },

通过以上五步即可完成在网站建设中,vue省市三级联动菜单的设置。全栈网络专业从事巩义网站建设郑州网站建设荥阳网站建设,欢迎大家随时咨询。

本文关键词: vue 未经允许不得转载:郑州网站建设|郑州网站制作|荥阳网站建设|巩义网站建设|网站优化-全栈网络



Copyright © 2017-2020 版权所有:全栈网络工作室 备案号:豫ICP备17039206号-1 HTML网站地图
郑州网站建设|郑州网站制作|郑州做网站|巩义网站制作|荥阳做网站|偃师网站制作-全栈网络