zoukankan      html  css  js  c++  java
  • 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>
    

      

  • 相关阅读:
    12、SpringBoot-CRUD增加数据
    12、SpringBoot-CRUD增加数据
    Cache操作类
    pythonhttp
    python学习
    自动化测试LoadRunner
    pythonweb自动化测试
    python学习工具篇
    python学习
    自动化测试之python安装
  • 原文地址:https://www.cnblogs.com/wangjae/p/8961052.html
Copyright © 2011-2022 走看看