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性能最佳实践的讨论,与求教
Mar 30 Javascript
jQuery 淡入淡出 png图在ie8下有黑色边框的解决方法
Mar 05 Javascript
jQuery 中国省市两级联动选择附图
May 14 Javascript
node.js调用C++开发的模块实例
Jul 03 Javascript
js全选按钮的实现方法
Nov 17 Javascript
jquery对象和DOM对象的相互转换详解
Oct 18 Javascript
JavaScript正则表达式小结(test|match|search|replace|split|exec)
Dec 08 Javascript
谈谈第三方App接入微信登录 解读
Dec 27 Javascript
jquery横向纵向鼠标滚轮全屏切换
Feb 27 Javascript
JavaScript数组迭代方法
Mar 03 Javascript
JSON 数据格式详解
Sep 13 Javascript
微信小程序实现点击按钮移动view标签的位置功能示例【附demo源码下载】
Dec 06 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图片验证码代码
2008/03/27 PHP
不用mod_rewrite直接用php实现伪静态化页面代码
2008/10/04 PHP
PHP使用Face++接口开发微信公众平台人脸识别系统的方法
2015/04/17 PHP
浅谈PHP接入(第三方登录)QQ登录 OAuth2.0 过程中遇到的坑
2017/10/13 PHP
php字符串过滤strip_tags()函数用法实例分析
2019/06/24 PHP
laravel http 自定义公共验证和响应的方法
2019/09/29 PHP
JavaScript入门学习书籍推荐
2008/06/12 Javascript
javascript与CSS复习(三)
2010/06/29 Javascript
js判断字符长度及中英文数字等
2014/03/19 Javascript
php读取sqlite数据库入门实例代码
2014/06/25 Javascript
javascript实现网页屏蔽Backspace事件,输入框不屏蔽
2015/07/21 Javascript
jquery按回车键实现表单提交的简单实例
2016/05/25 Javascript
JavaScript字符集编码与解码详谈
2017/02/02 Javascript
Bootstrap响应式表格详解
2017/05/23 Javascript
Vue在 Nuxt.js 中重定向 404 页面的方法
2019/04/23 Javascript
[02:38]DOTA2超级联赛专访Loda 认为IG世界最强
2013/05/27 DOTA
python基于windows平台锁定键盘输入的方法
2015/03/05 Python
Python使用filetype精确判断文件类型
2017/07/02 Python
python机器学习实战之最近邻kNN分类器
2017/12/20 Python
机器学习经典算法-logistic回归代码详解
2017/12/22 Python
Python Pandas找到缺失值的位置方法
2018/04/12 Python
Python字符串、整数、和浮点型数相互转换实例
2018/08/04 Python
Python 最大概率法进行汉语切分的方法
2018/12/14 Python
python爬取百度贴吧前1000页内容(requests库面向对象思想实现)
2019/08/10 Python
Python 统计位数为偶数的数字代码详解
2020/03/15 Python
python进度条显示-tqmd模块的实现示例
2020/08/23 Python
关于HTML5语义标签的实践(blog页面)
2016/07/12 HTML / CSS
计算机专业应届毕业生自荐信
2013/09/26 职场文书
骨干教师培训方案
2014/05/06 职场文书
研究生简历自我评
2015/03/11 职场文书
经济纠纷起诉状
2015/05/20 职场文书
暑期辅导班宣传单
2015/07/14 职场文书
Pycharm连接远程服务器并远程调试的全过程
2021/06/24 Python
使用Ajax实现无刷新上传文件
2022/04/12 Javascript
详解CSS3浏览器兼容
2022/12/24 HTML / CSS