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

最新推荐文章于 2024-04-19 11:55:01 发布

github_39598787

最新推荐文章于 2024-04-19 11:55:01 发布

阅读量1.7k

点赞数

分类专栏： vue 实现下拉功能

本文链接：https://blog.csdn.net/github_39598787/article/details/80346171

版权

vue 同时被 2 个专栏收录

7 篇文章 0 订阅

订阅专栏

实现下拉功能

1 篇文章 0 订阅

订阅专栏

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;
    },