vue 展开和收起

效果图

在这里插入图片描述

代码块

  <div><span v-for="(item,index) in showHandleList" :key="item.index"><span>{{item.emailFrom}}</span></span><span v-if="this.list.length > 4" @click="showAll = !showAll">{{word}}</span></div>

	data(){return{list:[{emailFrom:'利晴天<liqingtian@163.com>'},{emailFrom:'利晴天<liqingtian@163.com>'},{emailFrom:'利晴天<liqingtian@163.com>'},{emailFrom:'利晴天<liqingtian@163.com>'},{emailFrom:'利晴天<liqingtian@163.com>'},{emailFrom:'利晴天<liqingtian@163.com>'},{emailFrom:'利晴天<liqingtian@163.com>'},{emailFrom:'利晴天<liqingtian@163.com>'},{emailFrom:'利晴天<liqingtian@163.com>'},{emailFrom:'利晴天<liqingtian@163.com>'}],showAll:false}},computed:{    showHandleList(){      if(this.showAll == false){  //收起状态-显示“展示”        var showList = [];  //定义⼀个空数组        if(this.list.length > 4){  //控制显⽰前四个          for(var i = 0;i < 4; i++){            showList.push(this.list[i])  //将数组的前4条存放到showList数组中        }        }else{          showList = this.list;  //个数足够显示，不需要再截取        }        return showList;  //返回当前数组      }else{  // 展开状态-显示“收起”      return this.list;      }    },    word(){      if(this.showAll == false){  //对⽂字进⾏处理        return '展开'      }else{       return '收起'      }    }  },