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

<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>

你可能感兴趣的:(vue.js,前端,javascript)