vue achieves click expand click closed effect

The steps for installing vue will not be described here, let’s go directly to the topic below

First, define the data in data:

data () {
  return {
   toLearnList:[
    'html','css','javascript','java','php'  //Displayed data   ],
   showAll:false, //A property that marks whether the data needs to be fully displayed  }
 }

Use computed to process data:

computed:{
  showList:function(){
   if( == false){          //When the data does not need to be fully displayed    var showList = [];　 //Define an empty array    if( &gt; 3){　// Here we will first display the first three     for(var i=0;i&lt;3;i++){
      ([i])
     }
    }else{
     showList = 
    }
    return showList; //Return the current array   }else{
    return ;
   }
  },
  word:function(){
   if( == false){　// Process the text    return 'Click to expand'
   }else{
    return 'Click to close'
   }
  }
 }

template: When looping, use showList to operate directly. Use showAll = !showAll to control the event that is closed. Change the authenticity of this value.

<template>
 <div class="hello">
   <div v-for='item in showList'>{{item}}</div>
   <div @click="showAll = !showAll" class="show-more">{{word}}</div>
 </div>
</template>

Summarize

The above is the vue introduced by the editor to you to achieve click-expand click-close effect. I hope it will be helpful to everyone. If you have any questions, please leave me a message and the editor will reply to everyone in time. Thank you very much for your support for my website!