<van-card v-for="(item, index) in chooseList" :key="item.id">
<template #tags>
<van-image width="100%" height="100%" src="https://img.yzcdn.cn/vant/cat.jpeg"
style="display: flex;margin-top: 0.3rem;margin-left: 0.2rem;" />
<div style="display: flex; flex-direction: column;margin-left: 0.3rem;">
<span class="title">{{item.bookName}}</span>
<span :class="{desc: item.isCollapse, descAll: !item.isCollapse}">{{item.desc}}</span>
</div>
</template>
<template #footer>
<van-button class="allButton" size="mini" @click="showAll(item, index)" v-if="item.isCollapse">展开</van-button>
<van-button class="allButton" size="mini" @click="showPart(item, index)" v-else>收起</van-button>
</template>
</van-card>
// js, 数据获取的时候给每一个卡片绑定一个标示
this.chooseList = [...data]
this.chooseList.map(item => {
this.$set(item, 'isCollapse', false)
})
showAll(item, index) {
this.id = item.id;
this.$set(this.chooseList[index], 'isCollapse', false)
},
showPart(item, index) {
this.id = item.id;
this.$set(this.chooseList[index], 'isCollapse', true)
}
给每条数据加一个标示,收起展开按钮也要控制
与恶龙缠斗过久,自身亦成为恶龙;凝视深渊过久,深渊将回以凝视…