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