vue实现列表文字太长显示展开收起

<div class="content"
            v-for="(item, index) in evaluate"
            :key="index"
          >
            <div class="photo">
              <img src="@/assets/15Qrg.png" alt="">
            div>
            <div class="eval_content">
              <div class="info">
                <div class="info_top">
                  <span>{{item.from_name}}span>
                  <span>{{item.create_time}}span>
                div>
                <van-rate :value="item.score" readonly />
              div>
              <div>
                <p class="desc" :class="{active: item.isShowMore}">{{item.content}}<span class="isShow" v-if="item.isDescStatus" @click="item.isShowMore = !item.isShowMore">
                  {{item.isShowMore ? '展开' : '收起'}}
                span>p>
              div>
              <ul>
                <li>
                  <img src="@/assets/15Qrg.png" alt="">
                li>
                <li>
                  <img src="@/assets/15Qrg.png" alt="">
                li>
                <li>
                  <img src="@/assets/15Qrg.png" alt="">
                li>
              ul>
            div>
          div>

data.evaluate.list.map((item, index) => {
   if (item.content.length > 65) {
     item.isShowMore = true;
     item.isDescStatus = true;
   } else {
     item.isShowMore = false;
     item.isDescStatus = false;
   }
   if (index === 0 || index === 1) {
     arr.push(item)
   }
 })
 this.evaluate = [...arr];

.evaluate {
          background-color: #fff;
          border-radius: rem(10) rem(10) 0px 0px;
          margin: rem(30) rem(25);
          .title {
            font-size: rem(36);
            color: #2D2D2D;
            font-weight:500;
            padding: rem(50) 0 0 rem(39);
          }
          .content {
            display: flex;
            margin: rem(35) rem(38) 0;
            padding-bottom: rem(35);
            border-bottom: 1px solid #E4E4E4;
            .photo {
              width: rem(86);
              height: rem(86);
              border-radius: 50%;
              overflow: hidden;
              background-color: #ccc;
              img {
                width: 100%;
                height: 100%;
              }
            }
            .eval_content {
              flex: 1;
              margin-left: rem(27);
              .info {
                .info_top {
                  display: flex;
                  margin-bottom: rem(15);
                  span:nth-child(1) {
                    font-weight:400;
                    font-size: rem(36);
                    color: #222;
                  }
                  span:nth-child(2) {
                    flex: 1;
                    text-align: right;
                    color: #888;
                    font-weight:400;
                    font-size: rem(20);
                    line-height: rem(50);
                  }
                }
              }
              .desc {
                font-size: rem(24);
                color: #444;
                line-height: rem(38);
                font-weight:400;
                margin: rem(38) 0 rem(29) 0;
                position: relative;
                .isShow {
                  position: absolute;
                  bottom: 0;
                  right: rem(8);
                  color: #FF4600;
                  font-size: rem(20);
                  background: #fff;
                  padding-left: rem(30);
                }
              }
              .active {
                display: -webkit-box;
                -webkit-box-orient: vertical;
                -webkit-line-clamp: 3;
                overflow: hidden;
              }
              ul {
                display: flex;
                flex-wrap: wrap;
                li {
                  width: 30%;
                  height: rem(154);
                  margin-right: rem(16);
                  margin-bottom: rem(16);
                  img {
                    width: 100%;
                    height: 100%;
                  }
                }
                li:nth-last-child(1) {
                  margin-right: 0;
                }
              }
            }
          }
          .content:nth-child(3) {
            border-bottom: none;
          }
          .more {
            height: rem(80);
            line-height: rem(80);
            width: 100%;
            display: flex;
            align-items: center;
            justify-content: center;
            span {
              color: #FF4600;
              font-weight:400;
              font-size: rem(24);
              margin-right: rem(20);
            }
            img {
              width: rem(8);
              height: rem(16);
            }
          }
        }