vue 点击展开显示更多(点击收起部分隐藏)


Posted in Javascript onApril 09, 2019

功能如下:

这里就需要一开始只显示6个数据,点击展开才显示全部

vue 点击展开显示更多(点击收起部分隐藏)

vue 点击展开显示更多(点击收起部分隐藏)

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
}

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
使用jquery实现简单的ajax
Jul 08 Javascript
JavaScript中判断变量是数组、函数或是对象类型的方法
Feb 25 Javascript
JS中的数组方法笔记整理
Jul 26 Javascript
JS实现简单的天数计算器完整实例
Apr 28 Javascript
jquery Form轻松实现文件上传
May 24 jQuery
浅析Vue.js中v-bind v-model的使用和区别
Dec 04 Javascript
vue2 中二级路由高亮问题及配置方法
Jun 10 Javascript
深入了解query和params的使用区别
Jun 24 Javascript
关于layui的动态图标不显示的解决方法
Sep 04 Javascript
javascript自定义右键菜单插件
Dec 16 Javascript
JS实现盒子拖拽效果
Feb 06 Javascript
输入框跟随文字内容适配宽实现示例
Aug 14 Javascript
详解axios中封装使用、拦截特定请求、判断所有请求加载完毕)
Apr 09 #Javascript
关于vue状态过渡transition不起作用的原因解决
Apr 09 #Javascript
vue实现文字横向无缝走马灯组件效果的实例代码
Apr 09 #Javascript
Angular脚手架开发的实现步骤
Apr 09 #Javascript
详解vue 自定义marquee无缝滚动组件
Apr 09 #Javascript
javascript实现手动点赞效果
Apr 09 #Javascript
实例分析Array.from(arr)与[...arr]到底有何不同
Apr 09 #Javascript
You might like
PHP 自定义错误处理函数trigger_error()
2013/03/26 PHP
php中apc缓存使用示例
2013/12/25 PHP
php实现按天数、星期、月份查询的搜索框
2016/05/02 PHP
php通过文件头判断格式的方法
2016/05/28 PHP
JS 两日期相减,获得天数的小例子(兼容IE,FF)
2013/07/01 Javascript
JavaScript中访问节点对象的方法有哪些如何使用
2013/09/24 Javascript
jquery.cookie() 方法的使用(读取、写入、删除)
2013/12/05 Javascript
自己封装的javascript事件队列函数版
2014/06/12 Javascript
使用jQuery不判断浏览器高度解决iframe自适应高度问题
2014/12/16 Javascript
深入浅析JSON.parse()、JSON.stringify()和eval()的作用详解
2016/04/03 Javascript
Angular2入门--架构总览
2017/03/29 Javascript
AngularJS实现根据不同条件显示不同控件
2017/04/20 Javascript
js+css实现打字效果
2020/06/24 Javascript
深入理解nodejs搭建静态服务器(实现命令行)
2019/02/05 NodeJs
详解在React项目中安装并使用Less(用法总结)
2019/03/18 Javascript
vue本地打开build后生成的dist文件夹index.html问题
2019/09/04 Javascript
解决Vue使用bus总线时,第一次路由跳转时数据没成功传递问题
2020/07/28 Javascript
[04:42]2015国际邀请赛CDEC战队晋级之路
2015/08/13 DOTA
python算法学习之桶排序算法实例(分块排序)
2013/12/18 Python
Python基础教程之tcp socket编程详解及简单实例
2017/02/23 Python
python3.6连接MySQL和表的创建与删除实例代码
2017/12/28 Python
基于Pandas读取csv文件Error的总结
2018/06/15 Python
python进程间通信Queue工作过程详解
2019/11/01 Python
Python更换pip源方法过程解析
2020/05/19 Python
终于搞懂了Keras中multiloss的对应关系介绍
2020/06/22 Python
Python Selenium实现无可视化界面过程解析
2020/08/25 Python
JAVA代码查错题
2014/10/10 面试题
英语文学专业学生的自我评价
2013/10/31 职场文书
节约每一滴水演讲稿
2014/09/09 职场文书
公民授权委托书范本
2014/09/17 职场文书
校园游戏活动新闻稿
2014/10/15 职场文书
汽车销售员岗位职责
2015/04/11 职场文书
工人先锋号事迹材料(2016精选版)
2016/03/01 职场文书
OpenCV图像变换之傅里叶变换的一些应用
2021/07/26 Python
MySQL为数据表建立索引的原则详解
2022/03/03 MySQL
《帝国时代4》赛季预告 新增内容编译器可创造地图
2022/04/03 其他游戏