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

vue实现多文字展开、收起

单条文字收起展开

先上代码，再上思路

```

                {{ topgame.gameintr|open}}
                {{ topgame.gameintr}}
                  展开 >
                  收起 <  
                
             
       
            
{{topgame.gameintr}}
```

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

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

									 ·
									 ·
									 ·
									 ·
									 ·
									 ·
									 ·
									 ·

多条文字展开收起

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

思路：

• 新建一个数组 collapse:[‘展开 >’,‘展开 >’,‘展开 >’,‘展开 >’,‘展开 >’,‘展开 >’],
  根据多少个评论，就做多长的数组
• 利用过滤器。if该数组值== 展开， 给字符串加前缀暗号/？/ 。否则去掉前缀
• 过滤器判断前缀是否有暗号，有暗号的话说明是收起状态，那就减去暗号输出完整内容。如果暗号不对，就说明没加暗号，他是已经展开状态，然后收起它（裁剪出前95个字符串）

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

Vue.filter('open1',function(data) {
    let a=data.slice(0,3);
    if(a=='/?/') 
        return data.slice(3)
    else
     return data.slice(0,95)+' ... ...'
 })

    kai(index) {
        if(this.collapse[index]=='展开 >'){
            //+暗号 放进去
            this.collapse[index]='收起 <';
            this.hotcomment[index].d_CONTENT='/?/'+this.hotcomment[index].d_CONTENT;
        }
        else{
            //去掉暗号
            this.hotcomment[index].d_CONTENT=this.hotcomment[index].d_CONTENT.slice(3);
            this.collapse[index]='展开 >'
        }
        
    },

0.1元，让我知道这是否对你有帮助，仅此谢谢各位未来的大佬