vue实现多文字展开收起(含多条数据分别展开收起)
vue实现多文字展开、收起<span v-if="topgame.gameintr.length > 212"class="intr"><span v-if="!iskai">{{ topgame.gameintr|open}}</span><span v-else="!...
·
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">  展开 ></span>
<span v-else="!iskai" class="open" @click="changeiskai">  收起 <</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('展开')
}
更多推荐
已为社区贡献2条内容
所有评论(0)