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

功能如下：

这里就需要一开始只显示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
}

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持我们。

赞 (0)

相关推荐

  • vue和react等项目中更简单的实现展开收起更多等效果示例

    vue和react等项目中更简单的实现展开收起更多等效果示例

    前言 本文题目中虽然写有vue和react,但是并非vue和react相关知识,而是最基本的html5和css3的一些知识,之所以写vue,是因为我最近项目中用到了类似效果,我用vue相关知识实现并不雅观,用html5和css3实现,则更加完美. 项目案例 项目中有如下效果: 好多展开收起,对于这个的实现,我一开始用了vue一些比较挫的dom操作,就是父元素toggleClass一个类名,进行子元素的显示和隐藏. 由于这个方法是通用方法,项目中好多地方使用,代码大概如下: toggleShow(

  • vue.js 实现点击展开收起动画效果

    vue.js 实现点击展开收起动画效果

    最近公司项目加了个页面,其中要求是这样的,点击对应列表,展开和收起,其实就是显示和隐藏内容部分:说来惭愧,我花了半天时间才搞出来(自黑一下~),接下来分享给大家,先上效果图: vue页面: <template> <div class="dealRecord-wrap"> <div class="title-contant" v-for="(item,index) in items " > <div cla

  • Vue 中文本内容超出规定行数后展开收起的处理的实现方法

    文字比较难解释,直接看图应该就懂是要做什么了. 需求 工作中遇到的,需求就是超过四行得有个展开按钮,点击展开显示所有内容,不超过四行的话就不需要这个按钮并显示所有内容. 思路首先得判断文本自否超过四行,因为这些一般都是是前端异步请求然后后端发送过来,在组长的指导下,使用了 Vue 中的 nextTick 来监听 DOM 中是数据变化.接下来主要是 css 上的思路,其实上图可以分为两部分,如下图,标号1的部分展示前面三行,标号为2的部分会根据1的行数判断缩进的大小,然后展示第四行.最后通过背景色

  • vuejs数据超出单行显示更多，点击展开剩余数据实例

    vuejs数据超出单行显示更多，点击展开剩余数据实例

    说下我在工作中遇到的这个需求 1:页面上的菜单选项,选项内容是后台接口返回的数据,现在的需求是当选项的内容超出一行,在这行的右面显示更多,点击更多,显示剩下的选项的内容 看下效果图 这是展开的效果图 下面先看下我的html部分代码 <div :class="bussinessType?'show':'hidde'"> <dl> <dt>业务类型:</dt> <dd ref="bussinessTypeRef"&g

  • 基于vue展开收起动画的示例代码

    基于vue展开收起动画的示例代码

    之前用jquery实现还很简单,然后用vue就一直不行,然后在网上找了很多,又仔细看了vue官网 的过渡&动画,发现其实很简单 (可以多看vue官网 过渡&动画 实现更多效果) 1.实际效果 2.代码 <!--css--> .box{ height:200px;width: 200px; background-color:black; } .draw-enter-active, .draw-leave-active { transition: all 1s ease; } .d

  • vue实现点击展开点击收起效果

    安装vue的步骤在这里就不进行赘述了,下面直接进入正题 首先定义一下data里面的数据: data () { return { toLearnList:[ 'html','css','javascript','java','php' //进行显示的数据 ], showAll:false, //标记数据是否需要完全显示的属性 } } 使用computed对data进行处理: computed:{ showList:function(){ if(this.showAll == false){ //当

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

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

    功能如下: 这里就需要一开始只显示6个数据,点击展开才显示全部 HTML里调用showdetailList: <div> <p v-for="(item, index) in showdetailList"> <span>{{item.title}}</span> <span>{{item.name}}</span> </p> </div> <div v-if="detail

  • 微信小程序 多行文本显示...+显示更多按钮和收起更多按钮功能

    看了很多帖子,但是效果都不是很好.还是找微信小程序官方文档,自己写比较方便.自己动手丰衣足食!话不多说,上代码! 时空传送 先来个效果图 html <block wx:for='{{trendsList}}' wx:key='index'> <view class="box"> <view class="textFour_box {{item.seeMore?'three':''}}">{{item.text}}</view

  • Android悬浮窗按钮实现点击并显示/隐藏多功能列表

    前言 最近在一个项目中,需要制作录屏的功能,原先是在应用中有录屏/控制的按钮,思考之下觉得这种效果并不好,因此就想制作一个可以悬浮的悬浮窗,这样不论手机在什么界面中都可以对录屏功能进行控制. 这里就来构建一个桌面的悬浮窗,使用了DataBinding的MVVM模式,这些方面就不再多提. FloatNormalView 这个是一个普通的悬浮窗,悬浮窗只有一个按钮,点击按钮显示更多的按钮. 首先是页面布局: <?xml version="1.0" encoding="utf

  • IOS开发之tableView点击行跳转并带有“显示”更多功能

    IOS开发之tableView点击行跳转并带有“显示”更多功能

    首先给大家展示下效果图,觉得还满意的话,请继续学习代码实现过程. 一,工程图. 二,代码. RootViewController.h #import <UIKit/UIKit.h> @interface RootViewController : UIViewController <UITableViewDelegate,UITableViewDataSource> { UITableView * _tableView; NSMutableArray * provinceArray;

  • Vue.js 点击按钮显示/隐藏内容的实例代码

    实例代码: <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>vue点击切换显示隐藏</title> <script src="https://cdn.bootcss.com/vue/2.2.2/vue.min.js"></script> </head> <body> <d

  • Vue实现 点击显示再点击隐藏效果(点击页面空白区域也隐藏效果)

    平时项目中,经常会做一些下拉菜单等效果,这种效果可能会需要通过一个按钮来控制显示隐藏,并且当点击页面其他空白区域时,也要将其隐藏. 简单写个Demo <!-- 按钮 --> <button @click.stop="ShowHidden = !ShowHidden">显示或隐藏</button> <!-- 下拉列表 --> <div v-if="ShowHidden" @click.stop="&quo

  • vue实现水波涟漪效果的点击反馈指令

    vue实现水波涟漪效果的点击反馈指令

    水波效果 当用户点击时,会以点击中心为圆心产生一个水波扩散的涟漪效果,适用各个场景,美观又不浮夸,关键是可以给用户带来很直观的反馈. 来看实现 首先这里基于Vue3自定义指令进行封装,Vue3的自定义指令跟Vue2相比变动不是很大,.我们的目标是完成一个水波指令的基本原型,这里循序渐进展开. 定制一个水波纹默认样式 水波纹实际上就是通过用户点击的位置生成一个小圆圈,并且尺寸逐渐扩大到整个被点击元素的一个过程,所以这里先制定一个水波基本的样式,并设置好过度动画,过度动画应该是一个先慢后快的一个过程

  • Vue在echarts tooltip中添加点击事件案例详解

    Vue在echarts tooltip中添加点击事件案例详解

    目录 需求 解决方法 1.设置tooltip 2.定义hookToolTip变量 3.在methods中添加方法 4.完整代码 需求 需要在echarts tooltip点击学校的名称,跳转到详情页面:项目是从上海市---> 某个区----> 具体的学校(在最后一级的tooltip中绑定一个点击事件)  项目是用vue和echarts实现的,echarts是新版本(^5.0.2),并不能把点击事件绑定在window上 解决方法 1.设置tooltip enterable: true, //允许

随机推荐