当前位置: 首页 > news >正文

vue 中 v-for 的使用

v-for 获取列表的前 n 条、中间范围、末尾 n 条的数据

list: [{ img: '/static/home/news1.png', title: '标题1' },{ img: '/static/home/news2.png', title: '标题2' },{ img: '/static/home/news1.png', title: '标题3' },{ img: '/static/home/news2.png', title: '标题4' },{ img: '/static/home/news2.png', title: '标题5' },{ img: '/static/home/news1.png', title: '标题6' },{ img: '/static/home/news2.png', title: '标题7' },{ img: '/static/home/news1.png', title: '标题8' },{ img: '/static/home/news2.png', title: '标题9' },{ img: '/static/home/news1.png', title: '标题10' }
]

1、获取列表前 n 条数据

list.slice(0, 5) // 获取列表前 5 条数据

输出:标题1、标题2、标题3、标题4、标题5

<view class="paddingBottom10" v-for="(item, i) in list.slice(0, 5)" :key="i"><u-image width="260rpx" height="190rpx" border-radius="8" :src="item.img" /><view class="marginTop6 paddingLeft10 fontSize26 fontWeight700">{{ item.title }}</view>
</view>

2、获取列表 n ~ m 之间的数据

list.slice(3, 7) // 获取列表 4 ~ 7 之间的数据

输出:标题4、标题5、标题6、标题7

<view class="paddingBottom10" v-for="(item, i) in list.slice(3, 7)" :key="i"><u-image width="260rpx" height="190rpx" border-radius="8" :src="item.img" /><view class="marginTop6 paddingLeft10 fontSize26 fontWeight700">{{ item.title }}</view>
</view>

3、获取列表最后 n 条数据

list.slice(list.length - 4, list.length) // 获取列表最后 4 条数据

输出:标题7、标题8、标题9、标题10

<view class="paddingBottom10" v-for="(item, i) in list.slice(list.length - 4, list.length)" :key="i"><u-image width="260rpx" height="190rpx" border-radius="8" :src="item.img" /><view class="marginTop6 paddingLeft10 fontSize26 fontWeight700">{{ item.title }}</view>
</view>

v-for 直接循环数字

<view v-for="i of 5" :key="i">第{{ i + 1 }}个</view>

相关文章:

vue 中 v-for 的使用

v-for 获取列表的前 n 条、中间范围、末尾 n 条的数据 list: [{ img: /static/home/news1.png, title: 标题1 },{ img: /static/home/news2.png, title: 标题2 },{ img: /static/home/news1.png, title: 标题3 },{ img: /static/home/news2.png, title: 标题4 },{ img: /stati…...

项目--基于RTSP协议的简易服务器开发(2)

一、项目创立初衷&#xff1a; 由于之前学过计算机网络的相关知识&#xff0c;了解了计算机网络的基本工作原理&#xff0c;对于主流的协议有一定的了解。但对于应用层的协议还知之甚少&#xff0c;因此我去了解了下目前主要的应用层传输协议&#xff0c;发现RTSP&#xff08;…...

ubus编译_环境搭建

文章目录一、环境搭建脚本toolChain_jsonc.cmaketoolChain_libubox.cmaketoolChain_ubus.cmakeinstall.sh二、测试出现问题&#xff1a;三、测试uloopmain.c 每5s打印信息一、环境搭建脚本 准备四个文件 install.sh,toolChain_jsonc.cmake,toolChain_libubox.cmake,toolChai…...

移动通信(16)信号检测

常见的信号检测算法一般包括以下几类检测算法&#xff1a;最优、线性和非线性。最优检测算法&#xff1a;最大似然算法线性检测算法&#xff1a;迫零检测算法和最小均方误差检测算法非线性检测算法&#xff1a;串行干扰消除检测算法球形译码检测算法属于一种次优检测算法&#…...

数据结构与算法之《顺序表》

目录 1.什么是顺序表 顺序表的优势和缺点 顺序表预备知识 顺序表的代码实现 顺序表头部插入 顺序表的销毁 顺序表的头删 顺序表的尾删 顺序表的尾插 顺序表的任意位置插入 顺序表的查找 顺序表的打印 1.什么是顺序表 这篇文章我们来讲一下基础数据结构的顺序表&…...

MySQL索引15连问,抗住!

1. 索引是什么&#xff1f;索引是一种能提高数据库查询效率的数据结构。它可以比作一本字典的目录&#xff0c;可以帮你快速找到对应的记录。索引一般存储在磁盘的文件中&#xff0c;它是占用物理空间的。正所谓水能载舟&#xff0c;也能覆舟。适当的索引能提高查询效率&#x…...

【服务器管理】手动部署LNMP环境(CentOS 8)(非阿里云版本)

简述 如果是你是阿里云的服务器&#xff0c;我推荐你看引用的文章&#xff0c;本文也是参考了很多这篇文章的内容。 https://help.aliyun.com/document_detail/173042.htm 系统版本&#xff1a; CentOS 8 其实CentOS 7的版本可能更好安装一点&#xff0c;但是我有个服务推荐使…...

论文笔记:Positive-incentive Noise

2022 TNNLS 中心思想是&#xff1a;噪声并不一定是有害的 1 CV问题中的噪声 以图像分类为例 对图像加入适量的噪声后再训练&#xff0c;识别准确率反而上升了 再以目标检测为例&#xff1a; 从遥感影像中做飞机检测&#xff0c;一般都是把飞机紧紧框住&#xff0c;然后做…...

340秒语音芯片,轻松实现语音交互,畅享智能生活WTV380语音ic方案

随着智能家居、安防报警、宠物用品 等&#xff0c;智能设备的普及&#xff0c;语音交互技术正在逐渐成为人机交互的主要方式之一。而如何实现稳定高效的语音交互&#xff0c;就需要借助先进的语音芯片技术。今天&#xff0c;我们介绍的是一款高性能的语音芯片——WTV380&#x…...

有java基础学习大数据该如何规划

大数据开发对于Java语言的依赖程度比较高&#xff0c;如果想尝试大数据开发&#xff0c;学习过Java语言就很容易上手 Java是目前使用广泛的编程语言之一&#xff0c;具有的众多特性&#xff0c;特别适合作为大数据应用的开发语言。 目前很多大数据开发团队都在使用Java语言&a…...

【Java基础】HashMap的底层数据结构是怎样的?

HashMap就是以Key-Value的方式进行数据存储的一种数据结构。 HashMap在jdk1.7之前和jdk1.8之后的底层数据结构是不一样的。 在jdk1.7之前是数组链表的形式&#xff0c;并通过entry节点保存key和value值&#xff1b;当Hash冲突比较严重的时候&#xff0c;在数组上形成的链表就会…...

MongoDB5副本集高可用集群部署

MongoDB5副本集高可用集群部署 1.MongoDB简介 MongoDB官方网站&#xff1a;https://www.mongodb.com ​ MongoDB最大的特点是表结构灵活可变&#xff0c;字段类型可以随时修改。MongoDB中的每一行数据只是简单的被转化成Json格式后存储&#xff0c;因此MongoDB中没有MySQL中表…...

【Java】最新版本SpringCloudStream整合RocketMQ实现单项目中事件的发布与监听

文章目录前言依赖配置代码参考前言 SpringCloud项目中整合RocketMQ是为了削峰填谷。 这里我使用RocketMQ的作用用于接收项目中产生的消息&#xff0c;然后异步的发送邮件给客户&#xff0c;这是这个项目的产生的背景。 依赖配置 <dependencies><dependency><…...

abp.net 5.0 部署IIS10

今天遇到了abp.net 5.0部署iis10被卡住的问题&#xff0c;网上找了一些资料&#xff0c;都不是我要的&#xff0c;最后我总结一下我用的是 5.0的版本&#xff0c;所以我需要给服务器安装 iis5.0的相关运行环境 1&#xff1a;https://dotnet.microsoft.com/zh-cn/download/dotne…...

Windows安装Qt与VS2019添加QT插件

一、通过Qt安装包方式http://download.qt.io/archive/qt/5.12/5.12.3/.安装可以就选中这个MSVC 2017 64-bit&#xff0c;其他就暂时不用了二、通过vs2019安装Qt插件方式方法1下面这种方式本人安装不起来&#xff0c;一直卡住下不下来。拓展->管理拓展->联机->搜索Qt&a…...

自学大数据第5天~hadoop集群搭建(二)

配置集群/分布式环境 1,修改文件workers 需要把所有节点数据节点的主机名写入该文件,每行一个,默认localhost(即把本机(namenode也作为数据节点),所以我们在伪分布式是没有配置该文件; 在进行分布式时需要删掉localhost(又可能文件中没有该配置,没有那就不用删了,配置一下数据…...

MySQL (六)------MySQL的常用函数、 事务(TCL)、DCL用户操作语句、常见环境、编码问题

第一章 MySQL的常用函数 1.1 字符串函数 1.1.1 字符串函数列表概览 函数用法CONCAT(S1,S2,......,Sn)连接S1,S2,......,Sn为一个字符串CONCAT_WS(separator, S1,S2,......,Sn)连接S1一直到Sn&#xff0c;并且中间以separator作为分隔符CHAR_LENGTH(s)返回字符串s的字符数LENGTH…...

【3.8】操作系统内存管理、Redis数据结构、哈希表

内存满了&#xff0c;会发生什么&#xff1f; 当应用程序读写了这块虚拟内存&#xff0c;CPU 就会去访问这个虚拟内存&#xff0c; 这时会发现这个虚拟内存没有映射到物理内存&#xff0c; CPU 就会产生缺页中断&#xff0c;进程会从用户态切换到内核态&#xff0c;并将缺页中…...

Shell编程:轻松掌握入门级Shell脚本,成为Shell高手

文章目录前言一. 实验环境二. shell基础入门精讲2.1 什么是shell脚本&#xff1f;2.2 shell的种类2.3 脚本案例2.3.1 打印 hello-word案例2.3.2 统计指定目录下的文件数和目录数2.4 shell脚本编写规范总结前言 &#x1f3e0;个人主页&#xff1a;我是沐风晓月 &#x1f9d1;个人…...

FastApi的搭建与测试

一、fastapi的安装 1-1、使用pip安装 安装fastapi的语句 pip install fastapi -i https://mirrors.aliyun.com/pypi/simple因为fastapi启动依赖于uvicorn&#xff0c;所以我们还需要安装uvicorn。 pip install uvicorn -i https://mirrors.aliyun.com/pypi/simple下面我们来…...

零门槛NAS搭建:WinNAS如何让普通电脑秒变私有云?

一、核心优势&#xff1a;专为Windows用户设计的极简NAS WinNAS由深圳耘想存储科技开发&#xff0c;是一款收费低廉但功能全面的Windows NAS工具&#xff0c;主打“无学习成本部署” 。与其他NAS软件相比&#xff0c;其优势在于&#xff1a; 无需硬件改造&#xff1a;将任意W…...

stm32G473的flash模式是单bank还是双bank?

今天突然有人stm32G473的flash模式是单bank还是双bank&#xff1f;由于时间太久&#xff0c;我真忘记了。搜搜发现&#xff0c;还真有人和我一样。见下面的链接&#xff1a;https://shequ.stmicroelectronics.cn/forum.php?modviewthread&tid644563 根据STM32G4系列参考手…...

可靠性+灵活性:电力载波技术在楼宇自控中的核心价值

可靠性灵活性&#xff1a;电力载波技术在楼宇自控中的核心价值 在智能楼宇的自动化控制中&#xff0c;电力载波技术&#xff08;PLC&#xff09;凭借其独特的优势&#xff0c;正成为构建高效、稳定、灵活系统的核心解决方案。它利用现有电力线路传输数据&#xff0c;无需额外布…...

【Redis技术进阶之路】「原理分析系列开篇」分析客户端和服务端网络诵信交互实现(服务端执行命令请求的过程 - 初始化服务器)

服务端执行命令请求的过程 【专栏简介】【技术大纲】【专栏目标】【目标人群】1. Redis爱好者与社区成员2. 后端开发和系统架构师3. 计算机专业的本科生及研究生 初始化服务器1. 初始化服务器状态结构初始化RedisServer变量 2. 加载相关系统配置和用户配置参数定制化配置参数案…...

2.Vue编写一个app

1.src中重要的组成 1.1main.ts // 引入createApp用于创建应用 import { createApp } from "vue"; // 引用App根组件 import App from ./App.vue;createApp(App).mount(#app)1.2 App.vue 其中要写三种标签 <template> <!--html--> </template>…...

ServerTrust 并非唯一

NSURLAuthenticationMethodServerTrust 只是 authenticationMethod 的冰山一角 要理解 NSURLAuthenticationMethodServerTrust, 首先要明白它只是 authenticationMethod 的选项之一, 并非唯一 1 先厘清概念 点说明authenticationMethodURLAuthenticationChallenge.protectionS…...

vue3 定时器-定义全局方法 vue+ts

1.创建ts文件 路径&#xff1a;src/utils/timer.ts 完整代码&#xff1a; import { onUnmounted } from vuetype TimerCallback (...args: any[]) > voidexport function useGlobalTimer() {const timers: Map<number, NodeJS.Timeout> new Map()// 创建定时器con…...

工业自动化时代的精准装配革新:迁移科技3D视觉系统如何重塑机器人定位装配

AI3D视觉的工业赋能者 迁移科技成立于2017年&#xff0c;作为行业领先的3D工业相机及视觉系统供应商&#xff0c;累计完成数亿元融资。其核心技术覆盖硬件设计、算法优化及软件集成&#xff0c;通过稳定、易用、高回报的AI3D视觉系统&#xff0c;为汽车、新能源、金属制造等行…...

Swagger和OpenApi的前世今生

Swagger与OpenAPI的关系演进是API标准化进程中的重要篇章&#xff0c;二者共同塑造了现代RESTful API的开发范式。 本期就扒一扒其技术演进的关键节点与核心逻辑&#xff1a; &#x1f504; 一、起源与初创期&#xff1a;Swagger的诞生&#xff08;2010-2014&#xff09; 核心…...

基于matlab策略迭代和值迭代法的动态规划

经典的基于策略迭代和值迭代法的动态规划matlab代码&#xff0c;实现机器人的最优运输 Dynamic-Programming-master/Environment.pdf , 104724 Dynamic-Programming-master/README.md , 506 Dynamic-Programming-master/generalizedPolicyIteration.m , 1970 Dynamic-Programm…...