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

vue实现图片分页

news 2026/3/27 11:32:41

本小节学会使用v-show和@click 、v-bind，v-bind可以简写为:

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title>
</head>
<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script><body><div id="app"><button v-show="index>0" @click="index--">上一页</button><div><img :src="list[index]"></div><button v-show="index < list.length-1" @click="index++">下一页</button></div><script>const app = new Vue({el: '#app',data: {index: 0,list: ['./imgs/001.png','./imgs/002.png','./imgs/003.png','./imgs/004.png']}})</script>
</body></html>

相关文章：

vue实现图片分页

本小节学会使用v-show和click 、v-bind&#xff0c;v-bind可以简写为: <!DOCTYPE html> <html lang"en"><head><meta charset"UTF-8"><meta name"viewport" content"widthdevice-width, initial-scale1.0"…...

编程日记 2023/10/30 16:31:34

Baklib专注：企业数字内容体验与知识管理

随着科技的发展&#xff0c;消费者对数字体验的依赖程度攀升&#xff0c;品牌正面临着越来越大的压力。数字化体验作为当下最热门的话题之一&#xff0c;无论是传统企业还是互联网企业&#xff0c;都在积极探索创新方案和具体措施&#xff0c;从而提高用户的数字化体验&#xf…...

编程日记 2023/10/30 16:28:31

C++ 标准库随机数：std::default_random_engine

库头文件 #include <random> // 通过种子值设置随机数生成器 std::default_random_engine rng(seed);// 不设置种子值&#xff0c;使用默认值 std::default_random_engine rng; // 生成一个0到9之间的随机整数 int random_int rng() % 10;// 生成一个0到1之间的随机浮…...

编程日记 2023/10/30 16:27:30

Python requests之Cookie

视频版教程&#xff1a;一天掌握python爬虫【基础篇】 涵盖 requests、beautifulsoup、selenium 在某些需要登录的网站或者或者应用&#xff0c;假如我们需要抓取登录后的内容&#xff0c;技术上本质通过session会话实现。服务器端存会话信息&#xff0c;浏览器通过Cookie携带…...

编程日记 2023/10/30 16:24:28

【嵌入式项目应用】__嵌入式中，映射表的应用例子！

目录 一、嵌入式中的映射表是什么&#xff1f; 二、映射表在串口数据解析中的应用 1. 数据结构 2. 指令、函数映射表 3. 串口解析函数实现 三、映射表在UI设计中的应用 1. 数据结构 2. 函数映射表 3. 定义两个变量保存当前场景和上一个场景 4. 按下Up按键 跳转到指定场…...

编程日记 2023/10/30 16:22:25

react中的useState和useImmer的用法

文章目录 一、useState1. 更新基本类型数据2. 更新对象3. 更新嵌套对象4. 更新数组5.更新数组对象 二、Immer1. 什么是Immer2. 使用use-immer更新嵌套对象3. 使用useImmer更新数组内部的对象 一、useState react中文官网教程 1. 更新基本类型数据 在函数式组件中&#xff0c…...

编程日记 2023/10/30 16:21:25

Can‘t compile code “launch: program ＜program_path＞ does not exist “

StackOverflow上有一个类似的提问 我的情况很特殊&#xff0c;上面的回答没有解决我的问题&#xff0c;最后我发现是我的cpp文件名称为数字开头&#xff08;类似于1_floy.cpp&#xff09;&#xff0c;把名字里的数字挪到后面就好了。。。。。...

编程日记 2023/10/30 16:20:23

Mac电脑上升级nodejs

第一步&#xff0c;先查看本机node.js版本&#xff1a; node -v 第二步&#xff0c;清除node.js的cache&#xff1a; sudo npm cache clean -f 第三步&#xff0c;安装 n 工具&#xff0c;这个工具是专门用来管理node.js版本的&#xff0c;别怀疑这个工具的名字&#xff0c…...

编程日记 2023/10/30 16:19:22

基于单片机的太阳跟踪系统的设计

欢迎大家点赞、收藏、关注、评论啦 &#xff0c;由于篇幅有限&#xff0c;只展示了部分核心代码。 技术交流认准下方 CSDN 官方提供的联系方式 文章目录 概要 一、设计的主要内容二、硬件电路设计2.1跟踪控制方案的选择2.1.1跟踪系统坐标系的选择2.2系统总体设计及相关硬件介绍…...

编程日记 2023/10/30 16:18:21

V3Det大规模词汇视觉检测数据集与LaRS海上全景障碍物检测数据集

V3Det与LaRS是ICCV2023上发表的数据集工作&#xff0c;规模都比较大&#xff0c;后续有可能会用到&#xff0c;因此记录下来。 V3Det: Vast Vocabulary Visual Detection Dataset Paper: https://arxiv.org/abs/2304.03752 URL: https://v3det.openxlab.org.cn/ 在现实世界中…...

编程日记 2023/10/30 16:17:20

ubuntu(18.04) 安装 blast

1、下载 https://ftp.ncbi.nlm.nih.gov/blast/executables/blast/LATEST/2、解压&#xff0c;配置环境变量 tar zvxf ncbi-blast-2.14.1-x64-linux.tar.gz解压后改名为 blast 配置环境变量&#xff0c;可以不配置 使用的时候直接绝对路径使用 vim ~/.bashrc 将下面添加道最…...

编程日记 2023/10/30 16:14:17

3.2每日一题（定积分求抽水做工问题）

1、画图&#xff0c;把题目的容器画出来&#xff1a;球形容器&#xff0c;半径为R 2、根据容器的形状进行分析&#xff1a; 抽水的实质是不同深度的水抽出去走的位移是不一样的>抽水的过程 &#xff1a; &#xff08;1&#xff09;先考虑深度为 x到xdx 的薄层水抽出去做多少…...

编程日记 2023/10/30 16:11:14

c语言基础：L1-063 吃鱼还是吃肉

国家给出了 8 岁男宝宝的标准身高为 130 厘米、标准体重为 27 公斤&#xff1b;8 岁女宝宝的标准身高为 129 厘米、标准体重为 25 公斤。 现在你要根据小宝宝的身高体重&#xff0c;给出补充营养的建议。 输入格式&#xff1a; 输入在第一行给出一个不超过 10 的正整数 N&am…...

编程日记 2023/10/30 16:09:12

＜if＞ 标签中使用了不正确的语法。在 XML 中，＜if＞ 标签不需要使用 ＜![CDATA[ ... ]]＞ 将条件语句包装起来。 否则会报错

标签中使用了不正确的语法。在 XML 中&#xff0c; 标签不需要使用 <![CDATA[ ... ]]> 将条件语句包装起来。 否则会报错...

编程日记 2023/10/30 16:05:08

Ubuntu 诞生 19 年

导读2004 年 10 月 20 日&#xff0c;Ubuntu 4.10 正式发布&#xff0c;代号‘Warty Warthog’。 作为 Ubuntu 第一个版本&#xff0c;4.10 问世后立刻受到广大 Linux 用户欢迎。它搭载了当时最新的 GNOME 2.8 桌面环境&#xff0c;以及一系列实用软件&#xff0c;比如 Mozilla…...

编程日记 2023/10/30 16:03:06

JVM进阶(3)

一)什么是垃圾&#xff1f; 垃圾指的是在应用程序中没有任何指针指向的对象&#xff0c;这个对象就是需要被回收的垃圾&#xff0c;如果不及时的针对内存中的垃圾进行清理&#xff0c;那么这些垃圾对象所占用的内存空间可能一直保留到应用程序结束&#xff0c;被保留的空间无法…...

编程日记 2023/10/30 16:01:04

Qt QWidget、QDialog、QMainWindow的区别

QWidget QWidget是Qt框架中最基础的窗口类&#xff0c;可以理解为用户界面的最基本单元。QWidget类提供了一个空白窗口&#xff0c;可以通过继承该类来创建自定义的窗口类。QWidget类提供了基本的窗口属性和方法&#xff0c;如大小、位置、标题、图标等。 QDialog QDialog是…...

编程日记 2023/10/30 16:00:01

软考 系统架构设计师系列知识点之设计模式（10）

接前一篇文章&#xff1a;软考 系统架构设计师系列知识点之设计模式&#xff08;9&#xff09; 所属章节&#xff1a; 老版&#xff08;第一版&#xff09;教材 第7章. 设计模式 第2节. 设计模式实例 相关试题 9. 某软件公司欲设计一款图像处理软件&#xff0c;帮助用户对拍…...

编程日记 2023/10/30 15:57:59

【python爬虫】设计自己的爬虫 1. request封装

通过requests.session().request 封装request方法 考虑到请求HTTP/2.0 同时封装httpx 来处理HTTP/2.0的请求 封装requests # 遇到请求失败的情况时 重新请求&#xff0c;请求5次等待2s retry(stop_max_attempt_number5, retry_on_resultlambda re_data: re_data is None, wai…...

编程日记 2023/10/30 15:55:56

8.0 新特性 - innodb_ddl_threads

前言 MySQL 8.0.27 引入了一个新变量来控制 InnoDB 可用于创建&#xff08;排序和构建&#xff09;二级索引的最大并行线程数&#xff1a;innodb_ddl_threads 通过调整该参数&#xff0c;可以提升二级索引的创建速度。 参数介绍 1. innodb_ddl_threads 创建二级索引时&…...

编程日记 2023/10/30 15:53:55

为什么92%的Python WASM尝试失败？——资深编译器工程师披露LLVM-WASI链路5大隐性断点

第一章&#xff1a;Python WASM部署的现状与认知误区WebAssembly&#xff08;WASM&#xff09;正迅速成为浏览器端高性能计算的新基石&#xff0c;但将 Python 部署至 WASM 环境仍存在显著的认知断层。许多开发者误以为“Python 代码可直接编译为 WASM”&#xff0c;实则 Pytho…...

编程新知 2026/3/27 11:13:56

老设备焕新：OCLP更新系统全解析

老设备焕新&#xff1a;OCLP更新系统全解析 【免费下载链接】OpenCore-Legacy-Patcher 体验与之前一样的macOS 项目地址: https://gitcode.com/GitHub_Trending/op/OpenCore-Legacy-Patcher 随着苹果对旧款Mac设备的系统支持逐渐终止&#xff0c;许多仍能正常工作的老设…...

编程新知 2026/3/27 10:31:45

软件外包公司的“末路”：印度同行都慌了？——软件测试从业者的专业视角

在当今数字化浪潮中&#xff0c;软件外包行业曾是全球经济的重要引擎&#xff0c;尤其以印度为代表的外包巨头&#xff0c;凭借低成本人力优势主导了全球市场。然而&#xff0c;随着人工智能&#xff08;AI&#xff09;技术的迅猛发展&#xff0c;这一模式正面临前所未有的挑战…...

编程新知 2026/3/27 9:12:49

【实战】Ubuntu20.04硬盘挂载与权限管理全攻略（从分区合并到ext4格式化）

1. 从Windows迁移到Ubuntu的硬盘处理痛点 刚接触Ubuntu的Windows用户经常会遇到一个头疼问题&#xff1a;原先在Windows下分好区的机械硬盘&#xff0c;在Ubuntu系统里居然"消失"了。这不是硬盘真的不见了&#xff0c;而是Linux系统对NTFS分区的识别机制不同。我去年…...

编程新知 2026/3/27 7:52:16

实测有效方案：星图平台一键部署Qwen3-VL:30B，接入飞书提升办公效率

实测有效方案&#xff1a;星图平台一键部署Qwen3-VL:30B&#xff0c;接入飞书提升办公效率 1. 为什么选择Qwen3-VL:30B作为办公助手 1.1 办公场景中的图文处理痛点 在日常办公中&#xff0c;我们经常遇到需要同时处理图片和文字的场景。比如会议结束后&#xff0c;群里堆满了…...

编程新知 2026/3/27 6:05:01

如何用torchtext快速构建文本分类模型？5分钟上手RoBERTa与T5实战教程

如何用torchtext快速构建文本分类模型&#xff1f;5分钟上手RoBERTa与T5实战教程 【免费下载链接】text Models, data loaders and abstractions for language processing, powered by PyTorch 项目地址: https://gitcode.com/gh_mirrors/te/text 想要在PyTorch生态中快…...

编程新知 2026/3/27 5:32:48

Postiz消息队列：任务优先级与重试机制的终极指南

Postiz消息队列&#xff1a;任务优先级与重试机制的终极指南 【免费下载链接】clickvote Add upvotes, likes, and reviews to any context ⭐️ 项目地址: https://gitcode.com/GitHub_Trending/cl/clickvote Postiz是一款功能强大的开源项目&#xff0c;专注于为开发者…...

编程新知 2026/3/27 5:24:45

StarWind V2V Image Converter实战：轻松将IMG镜像转换为VMware VMDK格式

1. 为什么需要IMG转VMDK&#xff1f; 虚拟机镜像格式转换是IT运维中的常见需求。我遇到过不少这样的情况&#xff1a;手头有一个现成的IMG格式镜像文件&#xff0c;但当前虚拟化环境用的是VMware。这时候就需要把IMG转换成VMware原生支持的VMDK格式。 IMG是一种通用的磁盘镜像格…...

编程新知 2026/3/27 5:20:45

搭建专属汽车电子测试 AI 助手

专栏&#xff1a;《AI 汽车电子测试实战》第 15 篇 作者&#xff1a;一线汽车电子测试工程师 适合人群&#xff1a;想搭建私有 AI 助手的测试团队、关注数据安全的工程师开篇&#xff1a;为什么需要专属 AI 助手&#xff1f; 这是我上个月在某车企的 AI 部署项目中的真实经历。…...

编程新知 2026/3/27 4:46:02

OpenClaw多通道管理：GLM-4.7-Flash同时对接飞书与钉钉的配置技巧

OpenClaw多通道管理&#xff1a;GLM-4.7-Flash同时对接飞书与钉钉的配置技巧 1. 为什么需要多通道管理&#xff1f; 上周我接到一个技术咨询需求&#xff1a;一个小型内容团队需要同时在飞书和钉钉两个平台上接收AI助手服务。他们的编辑用飞书&#xff0c;运营用钉钉&#xf…...

编程新知 2026/3/27 4:19:49