在不使用select的情況下vue怎么實現下拉框功能

<p >
 <p @click="clickSize (item, index)">{{item.name}}</p> 
 <transition name="opacityLeave">
 <p class="condition-list" v-show="isShowSize && index == i">
 <p 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>
 </p>
 </p>
 </transition>
</p>

data() {
 return {
 isShowSize: false,
 i: -1
 };
 },
//實現點擊哪個下拉框顯示
 clickSize (item, index) {
 this.i = index;
 this.isShowSize = !this.isShowSize;
 },
//實現選取下拉值
 getSize (item, item1) {
 this.item.name = item1.AttrValueName;
 this.isShowSize = !this.isShowSize;
 },

<Select <span style="color: rgb(255, 0, 0);">v-bind:disabled="isAble" </span>clearable v-model="dataAgentEntity.ID" style="width:240px"> 
 <Option v-for="item in dataAgent" :value="item.ID" :key="item.ID">{{ item.name }}</Option> 
 </Select> 
export default { 
 data(){ 
 return{ 
 isAble: false,//select下拉框是否可用 
 } 
 }

 methods:{ 
 Test(){ 
 var vm = this; 
 if (vm.alertType == '郵件') { 
 vm.isAble = true; //不可用 
 } 
 
 } 
}