您好,欢迎访问一九零五行业门户网

怎样使用vue实现下拉列表功能

这次给大家带来怎样使用vue实现下拉列表功能,使用vue实现下拉列表功能的注意事项有哪些,下面就是实战案例,一起来看一下。
安装
cnpm install vue-droplist --save
组件中导入
import droplist from 'vue-droplist' // 显示下拉列表 showdroplist() { // 配置信息 const configdata = { position: { // 设置显示位置 top: '',  right: '', bottom: '', left: '' }, width: '40%', // 设置宽度 list: [ // 设置下拉列表数据和对应的点击事件 {text: '修改资料', action: this.updateuserinfo}, {text: '更换主题', action: this.updatetheme}, {text: '退出账号', action: this.signout} ... ], isshow: true //设置显示,默认false } droplist(configdata) //执行配置信息 }, updateuserinfo() { //do something }, updatetheme() { //do something }, signout() { //do something }
相信看了本文案例你已经掌握了方法,更多精彩请关注其它相关文章!
推荐阅读:
怎样使用js求number类型数组最大元素
怎样正确使用vuex项目结构目录与配置
以上就是怎样使用vue实现下拉列表功能的详细内容。
其它类似信息

推荐信息