vue 点击展开显示更多(点击收起部分隐藏)
2019-04-15 08:01
2987 查看
功能如下:
这里就需要一开始只显示6个数据,点击展开才显示全部
HTML里调用showdetailList:
<div> <p v-for="(item, index) in showdetailList"> <span>{{item.title}}</span> <span>{{item.name}}</span> </p> </div> <div v-if="detailList.length > 6" v-on:click="changeFoldState"> <span>{{brandFold?'展开':'收起'}}</span> </div>
data数据:
data() { return { brandFold: true } }
moke一个数据:
mocData() { var items = ['Dr.Ci:Labo城野医生', '日本', '控油 收敛毛孔', '任何肤质', '面部', '化妆水', '任何肤质', '面部', '化妆水'] var lists = ['商品品牌', '品牌国', '功能', '适合肤质', '适用部位', '产品类型', '商品品牌', '品牌国', '功能'] for (var i = 0; i < items.length; i++) { let item = {title: lists[i], name: items[i]} this.detailList.push(item) } console.log(this.detailList) }
使用computed属性:
set方法里的val值就是get方法返回的值
computed: { showdetailList: { get: function () { if (this.brandFold) { if (this.detailList.length < 7) { return this.detailList } let newArr = [] for (var i = 0; i < 6; i++) { let item = this.detailList[i] newArr.push(item) } return newArr } return this.detailList }, set: function (val) { this.showdetailList = val } } }
changeFoldState方法:
changeFoldState() { this.brandFold = !this.brandFold }
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持脚本之家。
您可能感兴趣的文章:
相关文章推荐
- vue 点击展开显示更多 点击收起部分隐藏
- vue点击展开更多,点击收起
- Vue 取出记录数后,页面显示刚开始显示部分,点击更多显示全部
- vue.js 实现点击展开收起动画效果
- vue实现点击展开,点击收起
- Wipe In and Wipe Out 抹进、抹出(动画显示、动画隐藏)(展开、折叠)(拉下、收起)
- listview嵌套gridview,并实现grid元素部分显示以及点击展开与折叠
- 用Jquery点击展开,出现隐藏的DIV,点击收起DIV又隐藏起来.
- JQuery点击收起,点击展开以及部分非空小验证
- listView的item中点击显示隐藏部分时,listView的高度无变化,且最后的item被挤出屏幕
- 文本内容显示三行,多余部分显示...,点击全部展开
- 通过更多、收起按钮点击展开数据效果
- vue中点击列表数据展开收起,利用v-for 渲染,先把状态值存储起来
- 【技术】点击“更多”后 显示/隐藏
- Jquery 父窗口中移进移出鼠标到Iframe: 移进显示更多内容, 移出隐藏部分内容
- vue实现点击展开点击收起效果
- 展开/收起按钮显示隐藏文字js代码
- 动态计算TextView宽度,点击展开更过,类似滴滴打车标题点击弹窗显示更多
- android listview嵌套gridview,并实现grid元素部分显示以及点击展开与折叠
- 如何点击按钮显示隐藏div,再点击收起,默认隐藏