How to use vue to implement click to expand and click to collapse

This time I will show you how to use vue to realize click to expand and click to collapse, and how to use vue to realize click to expand and click to collapse. What are the precautions? The following is a practical case, let's take a look.

The steps for installing vue will not be described in detail here. Let’s go directly to the topic

First define the data in data:

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

Use computed processes 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: When looping , directly use showList to operate, and display the closed event directly use showAll = !showAll to control, Change the true or false value 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. For more exciting information, please pay attention to other related articles on the PHP Chinese website!

Recommended reading:

How to use Vue2.0 to call the camera to take pictures

How to deal with JS in versions before IE9 Memory leak

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