uniapp里文本的展开与收起

方法一：简单省事

先看效果图：

再看vue代码：

<template>
   <view class="container">
      <!--  简介 -->
      <view class="evaluateItem" v-for="(item, index) in list" :key="index">
      
         <view class="evaluateText" :class="{lineclamp3:item.contentAll}"> {{item.content}} </view>
         <view class="" v-if="item.isMore">
            <view class="rightText" v-if="item.contentAll" @click="changeAllFun(item, index)">全部</view>
            <view class="rightText" v-else @click="changeAllFun(item, index)">收起</view>
         </view>
      </view>
   </view>
</template>
 
<script>
   export default {
      name: "evaluateList",
      data() {
         return {
            list: [
               {
                  content: '《流浪地球》是由中国电影股份有限公司、北京京西文化旅游股份有限公司、郭帆文化传媒（北京）有限公司、北京登峰国际文化传播有限公司联合出品，由郭帆执导，吴京特别出演、屈楚萧、赵今麦、李光洁、吴孟达等领衔主演的科幻冒险电影。影片根据刘慈欣的同名小说改编，故事背景设定在2075年，讲述了太阳即将毁灭，已经不适合人类生存，而面对绝境，人类将开启“流浪地球”计划，试图带着地球一起逃离太阳系，寻找人类新家园的故'
               }
            ]
         };
      },
      created() {
      	this.getlist()
      },
      onLoad() {
         this.getlist()
      },
      methods: {
         getlist() {
            this.list.forEach(item => {
               if (item.content.length > 40) {
                  item.isMore = true
                  item.contentAll = true
               } else {
                  item.isMore = false
                  item.contentAll = false
               }
            })
         },
         changeAllFun(item, index) {
            let list = JSON.parse(JSON.stringify(this.list));
            list.forEach((elem, ind) => {
               if (index === ind) {
                  elem.contentAll = !elem.contentAll
               }
            })
            this.list = list
         }
      }
 
   }
</script>
 
<style scoped>
   .container {
      width: 100vw;
      font-size: 12px;
      min-height: 100vh;
      display: inline-block;
      color: #1d1d1d;
      position: relative;
      background: #F1F1F1;
   }
   .evaluateItem {
      background-color: #FFFFFF;
      padding: 15px;
      border-radius: 10px;
      margin: 10px 15px 0 15px;
   }
   .evaluateText {
      margin: 10px 0 0 0;
      letter-spacing: 0.5px;
      line-height: 20px;
   }
   .lineclamp3 {
      overflow: hidden;
      text-overflow: ellipsis;
      display: -webkit-box;
      -webkit-line-clamp: 3;
      -webkit-box-orient: vertical;
      white-space: normal;
   }
 
   .rightText {
      color: #4399FC;
      text-align: right;
   }
 
</style>