1、需求

点击按钮出现下拉菜单

2、思路

1. 为按钮绑定点击事件showPicker()
2. 在按钮下另起一个div标签，用v-show绑定一个属性值isShowDropdown
3. 在methods里定义showPicker这个方法，来控制isShowDropdown的值为true或者false，来控制下拉菜单是否展示

3、主要代码

<div>
	<button @click="showPicker"/>
	
	<div v-show="isShowRouteDropdown" class="dropdown">
		<ul class="dropdown-data-style">
			<li v-for="(item,index) in data" :key="index" >
				{{item.text}}
			</li>
		</ul>
	</div>
</div>

export default {
	data(){
		return{
			isShowRouteDropdown: false,  //控制选择下拉框是否显示
		}
	},
	methods:{
		/* 按钮绑定的方法 */
		showPicker() {
			this.isShowRouteDropdown = !this.isShowRouteDropdown;
		},
	}
}

<style lang="stylus" rel="stylesheet/stylus" scoped>
	.dropdown
		position: absolute
		display: block
		right: 144px
		margin-right: 16px
		
	.dropdown-data-style
		display: flex
		flex-direction: column
		position: absolute
		background-color: #f9f9f9
		min-width: 160px
		box-shadow: 0px 8px 16px 0px  rgba(0,0,0,0.16)
		overflow: scroll
		height: 320px
		margin-top: 33px
	.dropdown-data-style
		li
			color: black
			padding: 12px 6px
			text-decoration: none
			border-bottom: 1px solid #eaeaea;
</style>