vue 展开和收起

效果图

在这里插入图片描述

代码块

  <div><span v-for="(item,index) in showHandleList" :key="item.index"><span>{{item.emailFrom}}</span></span><span v-if="this.list.length > 4" @click="showAll = !showAll">{{word}}</span></div>
	data(){return{list:[{emailFrom:'利晴天<liqingtian@163.com>'},{emailFrom:'利晴天<liqingtian@163.com>'},{emailFrom:'利晴天<liqingtian@163.com>'},{emailFrom:'利晴天<liqingtian@163.com>'},{emailFrom:'利晴天<liqingtian@163.com>'},{emailFrom:'利晴天<liqingtian@163.com>'},{emailFrom:'利晴天<liqingtian@163.com>'},{emailFrom:'利晴天<liqingtian@163.com>'},{emailFrom:'利晴天<liqingtian@163.com>'},{emailFrom:'利晴天<liqingtian@163.com>'}],showAll:false}},computed:{    showHandleList(){      if(this.showAll == false){  //收起状态-显示“展示”        var showList = [];  //定义⼀个空数组        if(this.list.length > 4){  //控制显⽰前四个          for(var i = 0;i < 4; i++){            showList.push(this.list[i])  //将数组的前4条存放到showList数组中        }        }else{          showList = this.list;  //个数足够显示,不需要再截取        }        return showList;  //返回当前数组      }else{  // 展开状态-显示“收起”      return this.list;      }    },    word(){      if(this.showAll == false){  //对⽂字进⾏处理        return '展开'      }else{       return '收起'      }    }  },

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/52030.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

【面试题】UDP和TCP有啥区别?

UDP UDP协议全称是用户数据报协议&#xff0c;在网络中它与TCP协议一样用于处理数据包&#xff0c;是一种无连接的协议。在OSI模型中&#xff0c;在第四层——传输层&#xff0c;处于IP协议的上一层。UDP有不提供数据包分组、组装和不能对数据包进行排序的缺点&#xff0c;也就…

PHP 安装Composer,vue前端依赖包

电脑安装Composer 官网下载&#xff1a;https://getcomposer.org/Composer-Setup.exe 后端安装&#xff1a; 检查是否安装依赖&#xff1a; 安装Composer install 或 Composer i 前端安装&#xff1a; yarn install 安装依赖

数据可视化公司:打造视觉化的数据分析

数据在现代社会中扮演着至关重要的角色。然而&#xff0c;原始和复杂的数据往往难以理解和应用。在这个信息爆炸的时代&#xff0c;数据可视化公司成为了解决这个问题的关键。 数据可视化公司是专业的数据分析和可视化团队&#xff0c;他们的目标是将海量数据转化为易于理解和直…

学习中ChatGPT的17种用法

ChatGPT本质上是一个聊天工具&#xff0c;旧金山的人工智能企业OpenAI于2022年11月正式推出ChatGPT。那么&#xff0c;ChatGPT与其他人工智能产品相比有什么特殊呢&#xff1f; 它除了可以回答结构性的问题&#xff0c;例如语法修正、翻译和查找答案之外。最关键的是它能够去解…

C#中的get和set

当我们定义属性的 get 访问器和 set 访问器时&#xff0c;其中的 return 和 value 分别代表以下含义&#xff1a; return&#xff1a;在 get 访问器中使用&#xff0c;表示返回属性的值给调用方。它用于将属性关联的字段的值返回给外部代码。value&#xff1a;在 set 访问器中…

Vue3+Pinia+Koa+Three.js 全栈电商项目总结复盘

前言 前几天一个朋友去义乌旅游&#xff0c;带回来很多小商品&#xff0c;就是一整个物美价廉&#xff0c;但是为什么线下购物和网购有的时候差别这么大&#xff08;网购经常要退换货啊&#x1f62d;&#x1f62d;&#x1f62d;&#xff09;&#xff0c;为此我萌生了一个想法&…

php_webshell免杀--从0改造你的AntSword

0x00 前言&#xff1a; 为什么会有改造蚁剑的想法&#xff0c;之前看到有做冰蝎的流量加密&#xff0c;来看到绕过waf&#xff0c;改造一些弱特征&#xff0c;通过流量转换&#xff0c;跳过密钥交互。 但是&#xff0c;冰蝎需要反编译去改造源码&#xff0c;再进行修复bug&am…

C++类型转换

目录 1 C类型转换1.1 静态转换(static_cast)1.2 动态转换(dynamic_cast)1.3 常量转换(const_cast)1.4 重新解释转换(reinterpret_cast) 1 C类型转换 类型转换(cast)是将一种数据类型转换成另一种数据类型。例如&#xff0c;如果将一个整型值赋给一个浮点类型的变量&#xff0c…

Oracle 时区详解

1 简介 由于地球经纬度及地球自转引起的经度方向&#xff0c;不同的经度的地方&#xff0c;所感受到的昼夜是不同 的。有关国际会议决定将地球表面按经线从东到西,每隔经度15度划分一个时区,并且规定 相邻区域的时间相差1小时。 这就是时区的由来。 而实际使用中&#xff0c…

营销数字化|企业级 AIGC 工具的「iPhone 时刻」

2007 年&#xff0c;乔布斯发布了第一款 iPhone&#xff0c;从此彻底改变了手机行业的市场走向。iPhone 成功的背后&#xff0c;一个很重要的原因是&#xff1a;它让用户以更简单、更符合直觉的方式来使用手机。 如今&#xff0c;AIGC 工具也在等待它的「iPhone 时刻」&#xf…

【Spring Boot】使用Spring Boot进行transformer的部署与开发

Transformer是一个用于数据转换和处理的平台&#xff0c;使用Spring Boot可以方便地进行Transformer的部署与开发。 以下是使用Spring Boot进行Transformer部署与开发的步骤&#xff1a; 创建Spring Boot项目 可以使用Spring Initializr创建一个简单的Spring Boot项目。在创…

解决方法:Linux python3.10回退python3.8

一、问题 在 Matter SDK 通过运行激活脚本开始构建环境部署 source scripts/activate.sh 时&#xff0c;出现 Getting requirements to build wheel: startederror: subprocess-exited-with-error Getting requirements to build wheel did not run successfully.│ exit cod…

C#_委托详解

委托是什么&#xff1f; 字面理解&#xff1a;例如A要建一栋别墅&#xff0c;找到B建筑施工队&#xff0c;请B来建筑别墅。 委托类型规定方法的签名&#xff08;方法类型&#xff09;&#xff1a;返回值类型、参数类型、个数、顺序。 委托变量可以用来存储方法的引用&#x…

什么是响应式图片?如何在网页中实现响应式图片?

聚沙成塔每天进步一点点 ⭐ 专栏简介⭐ 响应式图片&#xff08;Responsive Images&#xff09;⭐ 实现响应式图片的方法1. 使用<img>标签的srcset属性2. 使用<picture>元素3. 使用CSS的max-width属性4. 使用响应式图片库 ⭐ 写在最后 ⭐ 专栏简介 前端入门之旅&…

Android 13.0 强制app横屏显示

1.概述 在13.0产品定制化开发中,对于处理屏幕旋转方向,首先有kernel底层处理,从底层驱动gsensor 中获取数据,从而判断屏幕方向的,然后事件上报后 最后由WMS就是WindowManagerService 来处理旋转的相关事件 2.强制app横屏显示的核心类 /framework/base/services/java/com…

懵了,面试官问我Redis怎么测,我哪知道!

有些测试朋友来问我&#xff0c;redis要怎么测试&#xff1f;首先我们需要知道&#xff0c;redis是什么&#xff1f;它能做什么&#xff1f; redis是一个key-value类型的高速存储数据库。 redis常被用做&#xff1a;缓存、队列、发布订阅等。 所以&#xff0c;“redis要怎么测…

缺少代码签名证书会怎么样?

在当下恶意软件攻击频发的情形下&#xff0c;使用代码签名证书来保护代码安全已经成为每个软件开发商的基本认知。代码签名证书将保护软件代码的完整性&#xff0c;避免软件被非法篡改或植入恶意代码病毒&#xff0c;从而使得软件可以正常运行。那么如果软件缺少代码签名证书会…

vue-canvas基本使用和注意事项-动画闪烁效果-自适应适配不同分辨率问题

前言 canvas画布是html的新特性&#xff0c;熟悉画布我们可以完成很多拖拽&#xff0c;标注&#xff0c;动画的功能 使用canvas实现一个小例子很容易&#xff0c;但是真正在项目中使用时&#xff0c;我们需要注意的地方有很多 canvas基本原理就是它基于渲染方法&#xff0c;根…

小程序页面间有哪些传递数据的方法?

使用全局变量实现数据传递 在 app.js 文件中定义全局变量 globalData&#xff0c; 将需要存储的信息存放在里面使用的时候&#xff0c;直接使用 getApp() 拿到存储的信息 App({// 全局变量globalData: {userInfo: null} }) 使用 wx.navigateTo 与 wx.redirectTo 的时候&…

WebGL 绘制圆点

前言 这篇文章不说WebGL相关概念了&#xff0c;初学者先到网上看看WebGL相关概念。这里着重写一下在vue3前端框架下&#xff0c;如何通过webGL绘制圆点。 着色器代码(画点) 画点相关的着色器代码有顶点着色器和片元着色器&#xff0c;代码如下&#xff1a; 顶点着色器&…