当前位置:   article > 正文

Vue:列表展开和收起(超过一定行数时显示‘查看更多’按钮)

前端页面点击更多展示全部按钮怎么设置

前言:前端小白记录的一些小功能~

  公司开发中的小程序中有做任务签到的功能,这就涉及到了任务列表以及对任务列表的展开和收起功能,好了可以开始了,说多了就烦了

1.首先是css样式,因为设计稿上是超过两行默认隐藏内容所以需要写if判断,代码如下:

<ul>
  <li class="taskInfo" v-for="(item, idx) in bodyData.daily" :key="idx"  v-if="idx < 2">
    <p class="title">{
   {item.name}}<img src="../../../assets/coin.png"/><span>&#
声明:本文内容由网友自发贡献,不代表【wpsshop博客】立场,版权归原作者所有,本站不承担相应法律责任。如您发现有侵权的内容,请联系我们。转载请注明出处:https://www.wpsshop.cn/w/笔触狂放9/article/detail/91748
推荐阅读
相关标签
  

闽ICP备14008679号