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>