vue實現點擊展開,點擊收起

  安裝vue的步驟在這里就不進行贅述了，下面直接進入正題

  首先定義一下data里面的數據：

data () {
    return {
      toLearnList:[
        'html','css','javascript','java','php'   //進行顯示的數據
      ],
      showAll:false,  　　　　　　　　　　　　　　　　//標記數據是否需要完全顯示的屬性
    }
  }

  使用computed對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 '點擊展開'
      }else{
        return '點擊收起'
      }
    }
  }

template：循環的時候直接用showList進行操作，顯示收起的事件直接用showAll = !showAll 進行控制，改變這個值的真假

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