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 相关文章推荐
javascript实现unicode和字符的互相转换
Jul 18 Javascript
JS运行耗时操作的延时显示方法
Nov 19 Javascript
js转义字符介绍
Nov 05 Javascript
jquery实现图片翻页效果
Dec 23 Javascript
input标签内容改变的触发事件介绍
Jun 18 Javascript
IScroll5 中文API参数说明和调用方法
May 21 Javascript
JS判断输入字符串长度实例代码(汉字算两个字符,字母数字算一个)
Aug 02 Javascript
bootstrap与Jquery UI 按钮样式冲突的解决办法
Sep 23 Javascript
小发现之浅谈location.search与location.hash的问题
Jun 23 Javascript
Angular弹出模态框的两种方式
Oct 19 Javascript
p5.js实现简单货车运动动画
Oct 23 Javascript
针对Vue路由history模式下Nginx后台配置操作
Oct 22 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中调用SVN命令更新网站方法
2015/01/07 PHP
教你在PHPStorm中配置Xdebug
2015/07/27 PHP
php常用数组函数实例小结
2016/12/29 PHP
jQuery 页面 Mask实现代码
2010/01/09 Javascript
ymPrompt的doHandler方法来实现获取子窗口返回值的方法
2010/06/25 Javascript
Javascript 面向对象(二)封装代码
2012/05/23 Javascript
ext前台接收action传过来的json数据示例
2014/06/17 Javascript
jQuery插件PageSlide实现左右侧栏导航菜单
2015/04/12 Javascript
jquery插件star-rating.js实现星级评分特效
2015/04/15 Javascript
js事件监听器用法实例详解
2015/06/01 Javascript
JavaScript中字符串拼接的基本方法
2015/07/07 Javascript
ECMA5数组的新增方法有哪些及forEach()模仿实现
2015/11/03 Javascript
cocos creator Touch事件应用(触控选择多个子节点的实例)
2017/09/10 Javascript
nodeJs实现基于连接池连接mysql的方法示例
2018/02/10 NodeJs
vue配置请求本地json数据的方法
2018/04/11 Javascript
简述vue状态管理模式之vuex
2018/08/29 Javascript
JavaScript实现移动小精灵的案例代码
2020/12/12 Javascript
Python 分析Nginx访问日志并保存到MySQL数据库实例
2014/03/13 Python
Python Web框架Flask下网站开发入门实例
2015/02/08 Python
Python的Flask框架中实现简单的登录功能的教程
2015/04/20 Python
Python基于mysql实现学生管理系统
2019/02/21 Python
Python面向对象程序设计类变量与成员变量、类方法与成员方法用法分析
2019/04/12 Python
Python基础知识点 初识Python.md
2019/05/14 Python
python中for in的用法详解
2020/04/17 Python
安装多个版本的TensorFlow的方法步骤
2020/04/21 Python
Python基于codecs模块实现文件读写案例解析
2020/05/11 Python
python 模块导入问题汇总
2021/02/01 Python
ProForm英国站点:健身房和健身器材网上商店
2019/06/05 全球购物
运行时异常与一般异常有何异同?
2014/01/05 面试题
8和9的加减法教学反思
2014/05/01 职场文书
企业安全生产目标责任书
2014/07/23 职场文书
2014年9.18纪念日演讲稿
2014/09/14 职场文书
2014教师党员个人自我评议
2014/09/20 职场文书
2014年人事部工作总结
2014/12/03 职场文书
故宫英文导游词
2015/01/31 职场文书
剑指Offer之Java算法习题精讲二叉树专项训练
2022/03/21 Java/Android