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

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

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

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

  
class="taskInfo" v-for="(item, idx) in bodyData.daily" :key="idx"  v-if="idx < 2">
    
class="title">{{item.name}}"../../../assets/coin.png"/>+{{item.score}}猩淘币
    
class="describe">{{item.desc}}
  
  
class="taskInfo" v-for="(item, idx) in bodyData.daily" :key="idx"  v-show="showMissionList2" v-if="idx >= 2">
    
class="title">{{item.name}}"../../../assets/coin.png"/>+{{item.score}}猩淘币
    
class="describe">{{item.desc}}
  
  <--收起和展开按钮-->
  
class="shrink" v-if="bodyData.daily.length > 2" @click='toggle(2)'>
    class="line">
    {{showMissionList2 ? '收起': '查看更多'}}
    class="iconfont icon-return" :class="showMissionList2 ? '' : 'down'">
    class="line">
  

2.其次是js，因为我这里有两个列表要显示，所以toggle方法要用id进行区分，代码如下：

data( ){

　return{

　　name : ' 任务中心 '

　　bodyData: {

　　　new : []，

　　　daily : []

　　}，

　　showMissionList1 : false，//新手任务列表展开收起开关

　　showMissionList2 : false，//日常任务列表展开收起开关

　}

}，

methods：{

　/*

　* 展开和收起任务列表

　* 传一个参数id便于区分我的两个任务列表点击事件

　*/

　toggle (id) {

　　if (id === 1)  {

　　　this.showMissionList1 = ! this.showMissionList1

　　} else {

　　　this.showMissionList2 = ! this.showMissionList2

　　}

　}

}

 

接下来贴一张效果图~