vue实现1个div中展示数据默认只展示第一排点击右上角按钮展开全部再次点击收起
可以使用 v-if 或 v-show 来实现这个功能。首先,需要定义一个状态变量来控制组件的展示状态,比如:
data() {
return {
showAll: false
}
}
然后,在模板中使用 v-if 或 v-show 来根据状态变量来控制组件的展示状态。比如:
<template>
<div>
<div class="row" v-for="item in data" :key="item.id" v-show="showAll || item.row === 1">{{ item.content }}</div>
<button @click="showAll = !showAll">{{ showAll ? '收起' : '展开' }}</button>
</div>
</template>
在上面的示例中,我们根据数据中每一项的 row 属性来判断是否需要展示。当 showAll 为 true 时,展示所有项;否则,只展示 row 属性为 1 的项。按钮的点击事件会切换 showAll 的值,从而实现展开和收起的功能
原文地址: https://www.cveoy.top/t/topic/f4Pp 著作权归作者所有。请勿转载和采集!