vue 不使用select，实现下拉框功能

html部分：

<-- v-for循环出的div部分 -->
<div > 
      <p @click="clickSize (item, index)">{{item.name}}</p>   
      <transition name="opacityLeave">
           <div class="condition-list" v-show="isShow && index == i">
                <div class="size-wrap" v-if="item.RingSize">
                    <p class="size" :class="{'active':item1.active}" :key="index1" v-for="(item1, index1) in item.RingSize"  @click="getSize (item, item1) ">{{item1.AttrValueName}}</p>
               </div>
           </div>
      </transition>
</div>

js部分：

data() {
    return {
      isShow: false,
      i: -1
    };
  },
//实现点击循环出的任意一个下拉框显示
     clickSize (item, index) {
        this.i = index;
        this.isShow = !this.isShow;
    },
//实现选取相应下拉框下拉的值
    getSize (item, item1) {
        this.item.name = item1.AttrValueName;
        this.isShow = !this.isShow;
    },