加入收藏 | 设为首页 | 会员中心 | 我要投稿 李大同 （https://www.lidatong.com.cn/）- 科技、建站、经验、云计算、5G、大数据,站长网!
当前位置： 首页 > 百科 > 正文

Vue.js 实现数据展示全部和收起功能

发布时间：2020-12-16 23:38:45 所属栏目：百科 来源：网络整理
导读：如图所示，当我们获取到数据后每个栏都只显示5条，多出的部分隐藏，点击显示全部将数据都展现出来，如图所示 首先我们的数据类型是这样的， =5 item.mark==0" @click="changebq(index1,ele.state)" style="cursor:pointer" {{ele.namech}} 5" @click="xsqb(i

如图所示，当我们获取到数据后每个栏都只显示5条，多出的部分隐藏，点击显示全部将数据都展现出来，如图所示

首先我们的数据类型是这样的，

{{show}} +'show'+{{index1}}+ {{index}}-->
{{show}} +'show'+{{index1}}+ {{index}}-->
收起
changebq(index1,val,state) { // console.log(index,"index") console.log(val,"val") console.log(state,"state") // state=0 console.log(state,"changestate") this.tableData[index1].lscm[index].state = state==0?1:0; if (this.checkList.indexOf(val) > -1) { let index = this.checkList.indexOf(val) this.checkList.splice(index,1) } else { this.checkList.push(val) } console.log(this.checkList,88) },xsqb(index,mark){ this.tableData[index].mark=0 },//收起 shouqi(index,mark){ this.tableData[index].mark=1 }

总结

以上所述是小编给大家介绍的Vue.js 实现数据展示全部和收起功能。编程之家 52php.cn 收集整理的教程希望能对你有所帮助，如果觉得编程之家不错，可分享给好友！感谢支持。

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!
    相关内容
      推荐文章
        站长推荐
        热点阅读

          【免责声明】本站内容转载自互联网，其发布内容言论不代表本站观点，如果其链接、内容的侵犯您的权益，烦请提交相关链接至邮箱bqsm@foxmail.com我们将及时予以处理。

          建议您使用1920×1080分辨率、谷歌浏览器Google Chrome、Microsoft Edge以获得本站的最佳浏览效果

          Copygight © 2008-2022 https://www.lidatong.com.cn/ All Rights Reserved. 李大同