<template>
  <div v-for="(t, key) in data">
    {{ t.name }}--{{ key}}
      <div v-show="flag[key]">出来吧，阿里巴巴</div>
      <button @click="show(key)">显示</button>
  </div>  
</template>

<script>
    export default {
        name: "Test",
      data(){
          return {
            data:[{name:'tian', age:20},
                   {name:'hello', age:30},
                   {name:'today', age:50}
                   ],
            flag:[],
          }
      },
      methods:{
          show(key){
            //因为是下标的形式，数据不会实时渲染！
            //要使用this.$set的形式来修改它的值，这样就可以实时渲染，以实现切换的效果了。
            this.$set(this.flag, key, !this.flag[key])
            for(let i=0;i<this.data.length;i++){
              //将其它的隐藏掉
              if(key != i){
                this.$set(this.flag, i, false)
              }
          }
      },
      mounted() {
        for(let i=0; i<this.data.length;i++){
          this.flag[i] = false
        }
      }
    }
</script>