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>+{{item.score}}猩淘幣</span></p>
    <p class="describe">{{item.desc}}</p>
  </li>
  <li class="taskInfo" v-for="(item, idx) in bodyData.daily" :key="idx"  v-show="showMissionList2" v-if="idx >= 2">
    <p class="title">{{item.name}}<img src="../../../assets/coin.png"/><span>+{{item.score}}猩淘幣</span></p>
    <p class="describe">{{item.desc}}</p>
  </li>
  <--收起和展開按鈕-->
  <div class="shrink" v-if="bodyData.daily.length > 2" @click='toggle(2)'>
    <span class="line"></span>
    {{showMissionList2 ? '收起': '查看更多'}}
    <i class="iconfont icon-return" :class="showMissionList2 ? '' : 'down'"></i>
    <span class="line"></span>
  </div>
</ul>

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

接下來貼一張效果圖~