简单实用的 vue 展开 合并

<template>
    <div class="fromCon">
		<!-- 循环体 -->
      <div class="formBox" v-for="(item, i) in form" :key="i">
        <div class="formT1R">
              <span  @click="boxshowFn(i)" v-if="active == i"> 收起</span>
              <span  @click="boxshowFn2(i)" v-if="active != i"> 展开</span>
        </div>
        <!-- <transition name="draw"> -->
        <div class="fromBox" v-show="active == i">
			<p>{{item.name}}</p>
			<p>{{item.age}}</p>
			<p>{{item.sex}}</p>
        </div>
      </div>

      
    </div>
</template>

<script>
export default {
  data() {
  
    return {
		form:[
			{
				id:0,
				name:"小四",
				age:'23',
				sex:'男',
			},
			{
				id:1,
				name:"小三",
				age:'23',
				sex:'女',
			},
			{
				id:2,
				name:"小二",
				age:'23',
				sex:'女',
			}
		] 
    };
  },
  methods: {
    boxshowFn(num) {
      this.active = 8000;
    },
    boxshowFn2(num){
        this.active = num;
    },
  }
};