vue计算属性控制显示数据的数量以及展开与收起

需求实现的效果图如下所示：

点击前
点击后

具体实现：

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>

定义一下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 '收起'
    }
  }
}

css:（随便写的）

<style scoped>
  .show-more{
    cursor: pointer;
    color:red;
  }
</style>

点击此处查看原文