前言 :之前有写过展开收起功能  感觉不是特别清楚,接下来重新再弄一份,备下次参考 

 

这是这次需要实现内容的样式, 需求是这样的  点击 库存量减少  下面就会出现它更多的信息内容。

  

 

第一步:这是页面上的

 <div class="identify" >
       <p>属性</p>
       <span class="shuxing"  @click="KcShow(index.n)" >库存量减少</span>
       <p v-if="show_maybetwo_con"  >库存量减少库存量减少库存量减少库存量减少库存量减少库存量 减少库存量减少</p>
       <i class="bottom-line" ></i>
 </div>

需要注意的是:库存量减少的这个点击方法 @click="KcShow(index.n)"   AND  和我们 需要展开和隐藏内容  用v-if来控制  v-if="show_maybetwo_con" 

第二步:这是在data里面的

在data里我们需要定义这 v-if里面的东西  ,把它  定义为 true,就如下图所示:

第三步,就是在方法里面啦,在方法里面控制它的  展开和隐藏 

  KcShow(index,n){
        this.show_maybetwo_con = !this.show_maybetwo_con ;
  },

 

这一个简单的展开收起功能就完成了,不仅想让以后方便能经常用到,并且希望能对看到的小伙伴有帮助,有什么问题可以留言哦!!!

 

Logo

前往低代码交流专区

更多推荐