博客
关于我
强烈建议你试试无所不能的chatGPT,快点击我
vue实现点击展开,点击收起
阅读量:6160 次
发布时间:2019-06-21

本文共 1079 字,大约阅读时间需要 3 分钟。

  安装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 进行控制,改变这个值的真假

  

转载于:https://www.cnblogs.com/wangjae/p/8961052.html

你可能感兴趣的文章
【转】百度地图api,根据多点注标坐标范围计算地图缩放级别zoom自适应地图
查看>>
用户调研(补)
查看>>
ExtJS之开篇:我来了
查看>>
☆1018
查看>>
oracle 去掉空格
查看>>
6.13心得
查看>>
Runtime类
查看>>
eclipse decompiler
查看>>
记一个搜索网盘资源的网站
查看>>
jdk1.7和jdk1.8的String的getByte方法的差异
查看>>
java父子进程通信
查看>>
Android ADB server didn't ACK * failed to start daemon * 简单有效的解决方案
查看>>
Olap学习笔记
查看>>
Codeforces Round #431 (Div. 1)
查看>>
如何进行数组去重
查看>>
将标题空格替换为 '_' , 并自动复制到剪切板上
查看>>
List Collections sort
查看>>
Mysql -- You can't specify target table 'address' for update in FROM clause
查看>>
使用局部标准差实现图像的局部对比度增强算法。
查看>>
2017-2018-1 20165313 《信息安全系统设计基础》第八周学习总结
查看>>