vue 展开和收起

效果图

代码块

javascript 复制代码
  <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>
javascript 复制代码
	data(){
		return{
		    list:[{
	          emailFrom:'利晴天<[email protected]>'
	        },{
	          emailFrom:'利晴天<[email protected]>'
	        },{
	          emailFrom:'利晴天<[email protected]>'
	        },{
	          emailFrom:'利晴天<[email protected]>'
	        },{
	          emailFrom:'利晴天<[email protected]>'
	        },{
	          emailFrom:'利晴天<[email protected]>'
	        },{
	          emailFrom:'利晴天<[email protected]>'
	        },{
	          emailFrom:'利晴天<[email protected]>'
	        },{
	          emailFrom:'利晴天<[email protected]>'
	        },{
	          emailFrom:'利晴天<[email protected]>'
	        }],
	        
	        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 '收起'      
	    }    
	  }  
	},
相关推荐
HelloRevit30 分钟前
React DndKit 实现类似slack 类别、频道拖动调整位置功能
前端·javascript·react.js
阿珊和她的猫41 分钟前
Webpack Dev Server的安装与配置:解决跨域问题
vue.js·webpack
ohMyGod_1231 小时前
用React实现一个秒杀倒计时组件
前端·javascript·react.js
eternal__day1 小时前
第三期:深入理解 Spring Web MVC [特殊字符](数据传参+ 特殊字符处理 + 编码问题解析)
java·前端·spring·java-ee·mvc
醋醋1 小时前
Vue2源码记录
前端·vue.js
艾克马斯奎普特1 小时前
Vue.js 3 渐进式实现之响应式系统——第四节:封装 track 和 trigger 函数
javascript·vue.js
敲代码的玉米C1 小时前
Vue Draggable 深入教程:从配置到实现的完整指南
vue.js
frontDeveloper2 小时前
Vue3基础使用概览
vue.js
江耳2 小时前
从10秒到无限流:我用Vercel+NextJS实现AI流式对话遇到的超时问题及解决方案
前端
总之就是非常可爱2 小时前
三分钟让你看懂alien-signals computed基本原理
前端