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 相关文章推荐
js移除事件 js绑定事件实例应用
Nov 28 Javascript
document.documentElement和document.body区别介绍
Sep 16 Javascript
js实例属性和原型属性示例详解
Nov 23 Javascript
JavaScript使用Prototype实现面向对象的方法
Apr 14 Javascript
jQuery实现ajax调用WCF服务的方法(附带demo下载)
Dec 04 Javascript
浅谈js中StringBuffer类的实现方法及使用
Sep 02 Javascript
用瀑布流的方式在网页上插入图片的简单实现方法
Sep 23 Javascript
js中开关变量使用实例
Feb 24 Javascript
浅谈vue中关于checkbox数据绑定v-model指令的个人理解
Nov 14 Javascript
Node.js系列之连接DB的方法(3)
Aug 30 Javascript
JS插件amCharts实现绘制柱形图默认显示数值功能示例
Nov 26 Javascript
vue-openlayers实现地图坐标弹框效果
Sep 24 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
探讨Hessian在PHP中的使用分析
2013/06/13 PHP
PHP中使用imagick实现把PDF转成图片
2015/01/26 PHP
PHP基于rabbitmq操作类的生产者和消费者功能示例
2018/06/16 PHP
浅谈PHP array_search 和 in_array 函数效率问题
2019/10/15 PHP
jQuery UI-Draggable 参数集合
2010/01/10 Javascript
如何让页面加载完成后执行js
2013/06/26 Javascript
javascript实现带节日和农历的日历特效
2015/02/01 Javascript
javascript 动态创建表格的2种方法总结
2015/03/04 Javascript
js+HTML5实现视频截图的方法
2015/06/16 Javascript
jquery实现未经美化的简洁TAB菜单效果
2015/08/28 Javascript
详解JavaScript正则表达式之RegExp对象
2015/12/13 Javascript
JavaScript开发Chrome浏览器扩展程序UI的教程
2016/05/16 Javascript
微信浏览器禁止页面下拉查看网址实例详解
2017/06/28 Javascript
vue实现tab切换外加样式切换方法
2018/03/16 Javascript
JavaScript实现的DOM绘制柱状图效果示例
2018/08/08 Javascript
vue 音乐App QQ音乐搜索列表最新接口跨域设置方法
2018/09/25 Javascript
在Vue中使用axios请求拦截的实现方法
2018/10/25 Javascript
判断iOS、Android以及PC端的示例代码
2018/11/15 Javascript
node读写Excel操作实例分析
2019/11/06 Javascript
JavaScript实现简单贪吃蛇效果
2020/03/09 Javascript
Python while、for、生成器、列表推导等语句的执行效率测试
2015/06/03 Python
关于Python数据结构中字典的心得
2017/12/04 Python
Django使用HttpResponse返回图片并显示的方法
2018/05/22 Python
pytorch使用Variable实现线性回归
2019/05/21 Python
Python基础学习之类与实例基本用法与注意事项详解
2019/06/17 Python
Python学习笔记之lambda表达式用法详解
2019/08/08 Python
Python中断多重循环的思路总结
2019/10/04 Python
pytorch 图像预处理之减去均值,除以方差的实例
2020/01/02 Python
Python WebSocket长连接心跳与短连接的示例
2020/11/24 Python
详解CSS3新增的背景属性
2019/12/25 HTML / CSS
JD Sports瑞典:英国领先的运动时尚商店
2018/01/28 全球购物
固特异美国在线轮胎店:Goodyear Tire
2019/02/23 全球购物
给实习单位的感谢信
2014/02/01 职场文书
爬山的活动方案
2014/08/16 职场文书
实习协议书范本
2014/09/25 职场文书
违反纪律检讨书范文
2015/05/07 职场文书