Vue实现 展开 / 收起 功能_vue展开收起功能

实现数据超过一定的量就显示 展开/ 收起 功能；如下图所示：

 参考代码：核心在于 计算属性 computed 中；

注意： 开发中key的值尽量不要使用下标 index；

// template：循环的时候直接⽤showHandleList进⾏操作，显⽰收起的事件直接⽤showAll = !showAll 进⾏控制，改变这个值的真假
<template>  
	<div class="hello">
	    <!-- 数据展示 -->
		<div v-for='(item, index) in showHandleList' :key="index">
			{{item}}
		</div>      
		<div
			class="show-more" 
			v-if="this.toLearnList.length > 3"
			@click="showAll = !showAll"
		>
			{{word}}
			<img
				class="score-img"
				:class="{ 'rotate-img': showAll }" 
				src="../static/img/ic_zhankai.png" 
				alt="logo"
			>
        </div>
	</div>
</template>  
 
<script>
export default {
	// ⾸先定义⼀下data⾥⾯的数据：
	data(){    
		return {      
			toLearnList:[ 'html','css','javascript','typescript','e-charts' ], //进⾏显⽰的数据
			howAll:false,   // 控制 展示 / 收起 的标志   
		}  
	},
	// 使⽤computed对data进⾏处理：
	computed:{    
		showHandleList(){      
			if(this.showAll == false){  //收起状态-显示“展示”        
				var showList = [];  //定义⼀个空数组        
				if(this.toLearnList.length > 3){  //控制显⽰前三个          
					for(var i = 0;i < 3; i++){            
						showList.push(this.toLearnList[i])  //将数组的前3条存放到showList数组中        
					}        
				}else{          
					showList = this.toLearnList;  //个数足够显示，不需要再截取        
				}        
				return showList;  //返回当前数组      
			}else{  // 展开状态-显示“收起”      
				return this.toLearnList;      
			}    
		},    
		word(){      
			if(this.showAll == false){  //对⽂字进⾏处理        
				return '展开'      
			}else{       
				return '收起'      
			}    
		}  
	},
}
</script>  
 
<style scoped>
.score-img {
  width: 16px;
  transition: all 0.3s;
}
.rotate-img {
  transform: rotate(180deg);
}
</style>