在网站建设中，使用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 未经允许不得转载：郑州网站建设|郑州网站制作|荥阳网站建设|巩义网站建设|网站优化-全栈网络
