vue的展开收起功能

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

 

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

  

 

第一步：这是页面上的

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

 

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