vue 評論的展開全部和收起

下面代碼列子，拿一部分來理解

data () {
    return {
      pullDown: false
    }
}

 

<li class="fb pt-30" v-for="(item, index) in intro.replies" :key="item.id" v-if="!pullDown || index < 3">
</li>
<li class="font-20 c-666666 pb-10" v-if="intro.replies.length > 3" >
    <span v-if="pullDown" @click="setPullDown(true)">顯示全部{{intro.replies.length}}條</span>
    <span v-else @click="setPullDown(false)">收起評論</span>
</li>

 

這里代碼很重要

v-if="!pullDown || index < 3"

 

首先
!pullDown的作用是條件達到則顯示所有的列表也就是評論內容，條件達不到就走 index < 3,
index < 3 表示評論內容顯示3條。

下面通過觸發setPullDown方法來改變pullDown的狀態值，
true: 顯示全部
false： 收起內容

 

setPullDown (data) {
    this.pullDown = data
},