在 Vue 中实现只展开当前内容，同时关闭其他内容的,再次点击当前内容也会关闭

最新推荐文章于 2023-12-04 15:59:10 发布

KAGHQ

最新推荐文章于 2023-12-04 15:59:10 发布

阅读量167

点赞数

文章标签： vue.js 前端 javascript

本文链接：https://blog.csdn.net/LRQQHM/article/details/133640328

版权

<template>
  <div>
    <div v-for="(item, index) in items" :key="index" class="item">
      <div class="arrow" @click="toggleContent(index)"></div>
      <div class="content" :class="{ active: activeIndex === index }">
        <!-- 内容 -->
      </div>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      items: [ /* 数据源 */ ],
      activeIndex: -1
    };
  },
  methods: {
    toggleContent(index) {
      if (this.activeIndex === index) {
        this.activeIndex = -1;
      } else {
        this.activeIndex = index;
      }
    }
  }
};
</script>