在有些情况下,使用组件会有一些问题,所以用原生的HTML和JS写了一个简单的下拉选项。
一、HTMl页面
<div>
<span @click="onClickBox">{{name}}</span>
<div v-show='slectshow'>
<div
v-for='(item,index) in deptNmae'
:key="index"
@click="onClickNmae(item)"
>
{{item.name}}
</div>
</div>
</div>
二、JS
export default {
data() {
return {
name:'颜色',
slectshow:false,
item:[
{name:'红色',index:1},
{name:'黄色',index:2},
{name:'黑色',index:3},
]
}
},
methods:{
onClickBox() {
this.slectshow = !this.slectshow
},
onClickNmae(e) {
//进行点击后需要的事件
}
}
}
三、CSS
根据需要自行设定样式