Vue 实现展开收起功能
Vue 实现展开收起功能<template><div><div v-for="(item,index) in testList">{{item}}</div><div @click="showDisplay = !showDisplay">{{textSwitch}}</div></div...
·
Vue 实现展开收起功能
<template>
<div>
<div v-for="(item,index) in testList">{{item}}</div>
<div @click="showDisplay = !showDisplay">{{textSwitch}}</div>
</div>
</template>
<script>
export default {
data() {
return {
displayList:[
{id: 0, name: "测试1},
{id: 1, name: "测试2},
{id: 2, name: "测试3},
{id: 3, name: "测试4},
{id: 4, name: "测试5},
{id: 5, name: "测试6},
], // 展示的数据
showDisplay :false,
}
}
computed:{
testList() {
// 当数据不需要完全显示的时候
if(this.showDisplay == false){
let testList = []; // 定义一个空数组
// 先显示前三个
if(this.displayList.length > 3){
for(var i = 0;i < 3;i++){
testList.push(this.displayList[i])
}
}else{
testList = this.displayList;
}
return testList; // 返回当前数组
}else{
return this.displayList;
}
},
textSwitch() {
// 文字进行处理
if(this.showDisplay == false){
return '显示更多'
}else{
return '收起'
}
}
}
}
</script>
更多推荐
已为社区贡献4条内容
所有评论(0)