vue implements click to expand and click to collapse function

This time I will bring you the click to expand and click to collapse function of vue. What are the precautions for vue to implement the click to expand and click to collapse function. The following is a practical case, let's take a look.

First define the data in the data:

data () {
  return {
   toLearnList:[
    'html','css','javascript','java','php'  //进行显示的数据
   ],
   showAll:false, 　　　　　　　　　　　　　　　　//标记数据是否需要完全显示的属性
  }
 }

Use computed to process the data:

computed:{
  showList:function(){
   if(this.showAll == false){          //当数据不需要完全显示的时候
    var showList = [];　　　　　　　　　　　　　　　 //定义一个空数组
    if(this.toLearnList.length > 3){　　　　　　　//这里我们先显示前三个
     for(var i=0;i<3;i++){
      showList.push(this.toLearnList[i])
     }
    }else{
     showList = this.toLearnList
    }
    return showList;　　　　　　　　　　　　　　　　 //返回当前数组
   }else{
    return this.toLearnList;
   }
  },
  word:function(){
   if(this.showAll == false){　　　　　　　　　　　//对文字进行处理
    return &#39;点击展开&#39;
   }else{
    return &#39;点击收起&#39;
   }
  }
 }

template:

Use showList directly when looping Operation, display the collapsed event Directly use showAll = !showAll to control, change the true or false of this value

<template>
 <p class="hello">
   <p v-for=&#39;item in showList&#39;>{{item}}</p>
   <p @click="showAll = !showAll" class="show-more">{{word}}</p>
 </p>
</template>

I believe you have mastered the method after reading the case in this article, please come for more exciting Pay attention to other related articles on php Chinese website!

Recommended reading:

Detailed explanation of the use of Vue nextTick mechanism

Summary of Angular5 routing value transfer method

The above is the detailed content of vue implements click to expand and click to collapse function. For more information, please follow other related articles on the PHP Chinese website!