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 '收起'      
	    }    
	  }  
	},
相关推荐
不爱说话郭德纲几秒前
产品:上传图片拖拽一下怎么了 ?
前端·javascript·vue.js
make5 分钟前
AI 流式请求工具函数 (通义千问)
前端·javascript
作曲家种太阳7 分钟前
加餐-Vue3的渲染系统流程解说【手摸手带你实现一个vue3】
前端
前端太佬13 分钟前
前端对接微信扫码登录:从踩坑到填坑的全记录
前端·javascript·微信
京东零售技术21 分钟前
Taro on Harmony :助力业务高效开发纯血鸿蒙应用
前端·开源
前端大白话37 分钟前
救命!这10个Vue3技巧藏太深了!性能翻倍+摸鱼神器全揭秘
前端·javascript·vue.js
嘻嘻嘻嘻嘻嘻ys39 分钟前
《Vue 3全栈架构实战:Vite工程化、Pinia状态管理与Nuxt 3深度解析》
前端·后端
前端大白话41 分钟前
前端人必看!10个JavaScript“救命”技巧,让你告别加班改Bug
前端·javascript·程序员
Rudon滨海渔村1 小时前
【Tauri】桌面程序exe开发 - Tauri+Vue开发Windows应用 - 比Electron更轻量!8MB!
javascript·electron·tauri·桌面应用
cg50171 小时前
Vue回调函数中的this
前端·javascript·vue.js