vue点击按钮打开下拉菜单_Vue实现自定义下拉菜单功能

先看例子，后面有对用到的知识点的总结

效果图：

实现代码如下：

组件练习

组件1

菜单2

//注册组件

let list1 = ["北京","上海","深圳","郑州","南阳"];

let list2 = ["胡歌","陈默","陶亚东","刘同"];

Vue.component("custom-select",{

data:function(){

return {

selectShow:false,

val:""

}

},

props:["btn","list"],

template:`

class="keyWord"

:value="val"

@click="selectShow=!selectShow"

/>

v-show="selectShow"

:list="list"

v-on:value