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>