vue的展开收起功能
前言 :之前有写过展开收起功能 感觉不是特别清楚,接下来重新再弄一份,备下次参考这是这次需要实现内容的样式,需求是这样的 点击 库存量减少 下面就会出现它更多的信息内容。第一步:这是页面上的<div class="identify" ><p>属性</p><span class="shuxing"@click="...
·
前言 :之前有写过展开收起功能 感觉不是特别清楚,接下来重新再弄一份,备下次参考
这是这次需要实现内容的样式, 需求是这样的 点击 库存量减少 下面就会出现它更多的信息内容。
第一步:这是页面上的
<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 ;
},
这一个简单的展开收起功能就完成了,不仅想让以后方便能经常用到,并且希望能对看到的小伙伴有帮助,有什么问题可以留言哦!!!
更多推荐
所有评论(0)