Vue实现 展开 / 收起 功能
实现数据超过一定的量就显示 展开/ 收起 功能;如下图所示:参考代码:核心在于 计算属性 computed 中;注意: 开发中key的值尽量不要使用下标index;// template:循环的时候直接⽤showHandleList进⾏操作,显⽰收起的事件直接⽤showAll = !showAll 进⾏控制,改变这个值的真假<template><div class="hello"
·
实现数据超过一定的量就显示 展开/ 收起 功能;如下图所示:
参考代码:核心在于 计算属性 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>
更多推荐
已为社区贡献1条内容
所有评论(0)