vue實現展開全部，收起全部

1.給陣列的每一項新增是否展開或收起的標誌：‘toggleShowDes’和長度限制的標誌：‘ifMore’

        /*獲取評論列表*/
            getComment: function(flag){
                var m = this;
                if (!flag) {
                    m.conmontShow = false;
                }
                $.get('/subject/getComment',{id:m.topicItem.questionId,page:1},function(ret){
                    if (ret.errCode==0){
                        m.conmontShow = true;
                        var arr = ret.data.lists;
                        arr.forEach(function (v, i) {
                            if ($.inArray(zhentiListVm.userId, v.pointOfPraiseRecord) < 0) {
                                v.fabulous = false;
                            } else {
                                v.fabulous = true;
                            };
                            v.toggleShowDes = false;
                            v.ifMore=false;
                        });
                        setTimeout(function () {
                            $('.intro').each(function (i, v) {
                                    if (arr[i].content.length > 44) {
                                        console.log(123)
                                        arr[i].ifMore=true
                                    } else {
                                        arr[i].ifMore=false;
                                        console.log(456)
                                    }
                            })
                        });
   
                        zhentiListVm.commentLists = arr;
                        zhentiListVm.userInfo = ret.data.users;
                    }else{
                        console.log(ret)
                    }
                },'json')
            },

2.根據內容判斷狀態

      <div class="reply-comtent marginmain" v-if="item.toggleShowDes" :index="comIndex">
                           [[ item.content ]]
                            <div class="flex flex-align-center height4" @click="spread(item,comIndex,false)">
                                <div class="more-operation collect flex flex-align-center ">
                                    <span>收起全部</span>
                                    <img class="retract" src="/images/wrong/down.png" alt="" width="" height="">
                                </div>
                            </div>
                        </div>

                        <!--省略介紹-->
                        <div class="relative intro-wrap1 reply-comtent marginmain" v-else :index="comIndex">
                            <p :class="'font-text-shallow'+' '+ 'intro' + ' '+ (item.ifMore == true?'des1':'')">
                                [[ item.content ]]
                            </p>
                            <div class="flex flex-align-center height4" v-if="item.ifMore && !item.toggleShowDes" @click="spread(item,comIndex,true)">
                                <div class="more-operation open flex flex-align-center ">
                                    <span>展開全部</span>
                                    <img class="" src="/images/wrong/down.png" alt="" width="" height="">
                                </div>
                            </div>
                        </div>

3.點選展開和收起的函式

      /*簡介展開*/
            spread: function (item,index,targetState) {
                console.log(index)
                var self = this;
                if(targetState) {
                    self.commentLists.forEach(function (v, i) {
                        console.log(i);
                        v.toggleShowDes=(i== index);
                    });
                }else{
                    item.toggleShowDes=false;
                }
            }

4.css樣式

.des1, .des2 {
    position: relative;
}
 .des1 {
     word-break: break-all;
     height: .66rem;
     display: -webkit-box;
     -webkit-box-orient: vertical;
     -webkit-line-clamp: 2;
     overflow: hidden;
}
 .height4{height: .4rem}
.absolut{position: absolute}
/*.mores {
    background-image: linear-gradient(-180deg, rgba(255, 255, 255, 0) 0%, #ffffff 100%);
    height: .66rem;
    left: 0;
    bottom: 0;
}*/
.more-operation-collect{
    position: absolute;
    height: 0.66rem;
    color: #1facfc;
    right: 12px;

}
.more-operation {
    position: absolute;
    height: 0.66rem;
    color: #1facfc;
    right: 12px;

    /*padding-right: 127px;*/
}
.collect{ bottom: 2px;}
.open{   bottom: -12px;}
.more-operation span {
    margin-right: 6px;
}
.retract {
    -webkit-transform: rotate(180deg);
    -moz-transform: rotate(180deg);
    -ms-transform: rotate(180deg);
    -o-transform: rotate(180deg);
    transform: rotate(180deg);
}