vue实现多文字展开收起（含多条数据分别展开收起）

vue实现多文字展开、收起

单条文字收起展开

先上代码，再上思路

```
<span v-if="topgame.gameintr.length > 212"    class="intr">
                <span v-if="!iskai">{{ topgame.gameintr|open}}</span>
                <span v-else="!iskai">{{ topgame.gameintr}}</span>
                <span v-if="!iskai" class="open"   @click="changeiskai">&nbsp 展开 ></span>
                <span v-else="!iskai" class="open" @click="changeiskai">&nbsp 收起 <</span>  
                <!-- <p>展开 ></p>
                <p>展sfafs开 ></p> -->
            </span> 
       
            <p v-else="topgame.gameintr.length > 212"  class="intr">{{topgame.gameintr}}</p>
```

• topgame.gameintr是我请求的文字内容
• topgame.gameintr|open 是过滤器，这里只需要前212个字符
• iskai 名字起的很业余，用来判断他是否已经展开，默认值是false

为什么用3个v-if呢。可能你已经发现第二个v-if完全可以用三目运算符。
but 三目运算符不支持return，那不是一个确定的值。所以只能用这种方案。

多条文字展开收起

v-for遍历出的数组内容，内容字符串各自也想折叠怎么办。用上面办法是不可行的
按上面方法一个iskai控制的话，由于变量一改变。所有元素都会改变，导致无法单个元素展开、收起。

思路：

• 新建一个数组 orginlist:[‘展开 >’,‘展开 >’,‘展开 >’,‘展开 >’,‘展开 >’,‘展开 >’],
  根据多少个评论，就做多长的数组
• 利用过滤器，根据你现在操作的文字数组的下标index，对应orginlist，如果orginlist[index]是展开就裁剪，如果orginlist[index]是收起就原样展示
• html处代码：如果是.length大于95就显示展开收起按钮， 否则就不显示了。

代码更简单了，大家可以反过来思考上面那个需求有没有新方法，那是我很久之前的笔记了

<---大于80个字符时候显示这个-->
<span v-show="scope.row.content && scope.row.content.length>80">{{scope.row.content | filterscontent(scope.$index,orginlist)}}</span>
<---小于80个字符时候原样显示-->
<span v-show="scope.row.content && scope.row.content.length<80">{{scope.row.content }}</span>
<---展开收起按钮-->

<span style="color:#2b9" @click="changeorginlist(scope.$index)"
      v-show="scope.row.content && scope.row.content.length>80">
      {{orginlist[scope.$index]}}
</span>

filters:{
        filterscontent(val,index,orginlist) {
            if(val && orginlist[index]==='展开') return val.substring(0,79)+' ... '
            else return val
        }
    },
    
  //method方法
 changeorginlist(index) {
 		//替换值
       if(this.orginlist[index]==='展开') this.orginlist.splice(index,1,'收起')
       else this.orginlist.splice(index,1,'展开')
   },

//获取评论数据时候，根据数据长度新建数组
this.orginlist=[]
for(let i=0;i<res.length;i++) {
     this.orginlist.push('展开')
 }