安装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>

  

内容来源于网络如有侵权请私信删除
你还没有登录,请先登录注册
  • 还没有人评论,欢迎说说您的想法!

相关课程