vuejs实现下拉框菜单选择

本文实例为大家分享了vuejs实现下拉框菜单选择的具体代码，供大家参考，具体内容如下

方法一：

<script type="text/ecmascript-6">
export default {
data() {
 return {
 isShowSelect: false,
 dataList: [
  {key: -1, value: "请选择"},
  {key: 0, value: "苹果"},
  {key: 1, value: "香蕉"}
 ]
 unitName:'请选择'
 }
},
methods: {
 arrowDown() {
 this.isShowSelect = !this.isShowSelect;
 },
 select(item, index) {
 this.isShowSelect = false;
 console.log(item);
 console.log(index);
 this.unitModel = index;
 this.unitName = item.value;
 }
}
};
</script>

<li>
<h3 class="F7">下拉框选择案例</h3>
<div class="por">
<div class="selectBox" style="width: 400px;">
 <div class="selectBox_show" v-on:click.stop="arrowDown">
 <i class="icon icon_arrowDown"></i>
 <p title="请选择">{{unitName}}</p>
 <input type="hidden" name="unit" v-model="unitModel">
 </div>
 <div class="selectBox_list" v-show="isShowSelect"
  style="max-height: 240px; width: 398px; display: block;">
 <div class="selectBox_listLi" v-for="(item, index) in dataList"
   @click.stop="select(item, index)">{{item.value}}
 </div>
 </div>
</div>
</div>
</li>

方法二：由父组件传递数据给子组件

<template>
<div class="selection-component">
 <div class="selection-show" @click="toggleDrop">
 <span>{{ selections[nowIndex].label }}</span>
 <div class="arrow"></div>
 </div>
 <div class="selection-list" v-if="isDrop">
 <ul>
  <li v-for="(item, index) in selections" @click="chooseSelection(index)">{{ item.label }}</li>
 </ul>
 </div>
</div>
</template>

<script>
export default {
props: {
selections: {
 type: Array,
 default: [{
 label: 'test',
 value: 0
 }]
}
},
data () {
return {
 isDrop: false,
 nowIndex: 0
}
},
methods: {
toggleDrop () {
 this.isDrop = !this.isDrop
},
chooseSelection (index) {
 this.nowIndex = index
 this.isDrop = false
 this.$emit('on-change', this.selections[this.nowIndex])
}
}
}
</script>

来源：https://blog.csdn.net/liuxin_1991/article/details/81181957