可以使用 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 著作权归作者所有。请勿转载和采集!

免费AI点我,无需注册和登录