时间:2021-05-26
功能如下:
这里就需要一开始只显示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}以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持。
声明:本页内容来源网络,仅供用户参考;我单位不保证亦不表示资料全面及准确无误,也不保证亦不表示这些资料为最新信息,如因任何原因,本网内容或者用户因倚赖本网内容造成任何损失或损害,我单位将不会负任何法律责任。如涉及版权问题,请提交至online#300.cn邮箱联系删除。
这里讲一下,如何使用vue控制多行文字展开收起(也叫控制文字展开隐藏)。效果:这里设置了控制三行,如果超过三行会展示,“显示更多”超出文字显示省略号。点击“显示
实现效果如下:需求:由于后台搜索选项有很多,影响页面美观,所以一进来要隐藏一部分搜索项,只保留1行,点击【展开搜索】按钮的时候才显示全部,点击【收起搜索】按钮又
最近公司项目加了个页面,其中要求是这样的,点击对应列表,展开和收起,其实就是显示和隐藏内容部分;说来惭愧,我花了半天时间才搞出来(自黑一下~),接下来分享给大家
本文实例为大家分享了小程序实现列表展开收起的具体代码,供大家参考,具体内容如下效果:原理:利用AppData值+显示隐藏的样式,进行展开收起。wxml:{{is
本demo背景是一个视频,文字是打印机效果,按钮在文字打完才会显示,点击按钮背景向上收起,同时显示默认首页组件(如是初建vue项目列表,则为helloWorld