Vue展開収納機能を実現

Vue展開収納機能を実現

<template>
  <div>
    <div v-for="(item,index) in testList">{{item}}div>
    <div @click="showDisplay = !showDisplay">{{textSwitch}}div>
 div>
template>

<script>
export default {
  data() {
    return {
      displayList:[
        {id: 0, name: "  1},
        {id: 1, name: "  2},
        {id: 2, name: "  3},
        {id: 3, name: "  4},
        {id: 4, name: "  5},
        {id: 5, name: "  6},
       ], //      
      showDisplay :false,
      }
    }
  computed:{
    testList() {
      //              
      if(this.showDisplay == false){          
        let testList = []; //        
        //       
        if(this.displayList.length > 3){　　　　　　　
          for(var i = 0;i < 3;i++){
            testList.push(this.displayList[i])
         }
        }else{
          testList = this.displayList;
     }
       return testList; //       
     }else{
    return this.displayList;
   }
  },
    textSwitch() {
     //       
     if(this.showDisplay == false){　　　　　　　　　　　
      return '    '
     }else{
      return '  '
     }
  }
 }
}
</script>