vue实现一个列表， 点击箭头展示对应内容，类似于原生js手写tab切换

效果如下，点击箭头内容描述会展示，点哪个箭头哪个内容就展示，其他内容隐藏，类似于tab切换

 

 

 

html结构

 <div class="panel">
      <van-cell v-for="(item, index) in list" :key="index">
        <template #title>
          <div>{{ item.title }}</div>

          <van-icon
            name="arrow-down"
            @click="expand(index)"
            v-if="itemIndex == index"
          />
          <van-icon name="arrow" @click="expand(index)" v-else />
        </template>
        <template #label v-if="itemIndex == index">
          <div>
            {{ item.des }}
          </div>
        </template>
      </van-cell>
    </div>

js代码

   itemIndex: 0,
   list: [
        {
          title: "标题",
          des: "内容描述",
        },
        {
          title: "标题2",
          des: "内容描述2",
        },
        {
          title: "标题",
          des: "内容描述",
        },
        {
          title: "标题",
          des: "内容描述",
        },
        {
          title: "标题",
          des: "内容描述",
        }
      ]





   expand(index) {
      console.log(index);
      this.isRight = !this.isRight;
      this.itemIndex = index;
    },