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

Vue3中实现轮播图

article 2025/9/23 13:13:54

目录

1. 轮播图介绍

 2. 实现轮播图

2.1 准备工作

1、准备至少三张图片，并将图片文件名改为数字123

 2、搭好HTML的标签

3、写好按钮和图片标签

 ​编辑

2.2 单向绑定图片

2.3 在按钮里使用方法

2.4 运行代码

3. 完整代码

1. 轮播图介绍

首先，什么是轮播图？ 轮播图是指提供【上一页】【下一页】进而能切换图片 , 这在前端页面中是十分常见的一个页面显示

那么好 , 接下来我们看看具体的效果图，这是刚运行的效果：

 当我们点击下一页时，图片切换到下一张，并且点击上一页时，必须是之前的上一页

 2. 实现轮播图

2.1 准备工作

因为图片的切换是由按钮控制的，所以<img src=等于后面的值一定是个变量，这样才能由按钮中的方法控制，所以我们应该把图片名称设置简单而又容易控制的

1、准备至少三张图片，并将图片文件名改为数字123

 这些图片尽量与HTML文件放在同一个目录下

 2、搭好HTML的标签

3、写好按钮和图片标签

 

这个时候，其实已经有模有样的了，我们运行一下代码：

2.2 单向绑定图片

 我们要把之前的src地址改成

<img src=`${参数名}.图片的格式`

 同时:v-bind能绑定src 使得图片能显示到页面 , 即使id发生变化 , 也不会影响图片显示

 接着在script标签中定义一个id

2.3 在按钮里使用方法

在button按钮里 , 通过@click="方法名" 来进行事件控制图片切换

在script标签中定义方法的同时 , 对id的加减进行一个if语句判断:

2.4 运行代码

当我们在第一页时 依然点击上一页按钮, 页面就会弹窗提示

 当这是最后一页的时候 , 继续下一页也会弹窗提示

3. 完整代码

<!DOCTYPE html>
<html lang="zh-CN"><head><title>轮播图</title>
</head>
<div id="app"><img :src=`${id}.png` style="width: 700px;height: 400px;"><br><!-- 在button标签中添加按钮 --><button @click="prevPage">上一页</button><button @click="nextPage">下一页</button>
</div><body><script type="module">import { createApp, ref } from "./vue.esm-browser.js"createApp({setup() {//定义图片idconst id = ref(1);//定义方法//上一页const prevPage = () => {if (id.value <= 1) {alert("已经是第一张了");} else {id.value--;}}//下一页const nextPage = () => {if (id.value >= 3) {alert("已经是最后一张了");} else {id.value++;}}return {id,prevPage,nextPage}}}).mount("#app")</script>
</body></html>

相关文章：

Vue3中实现轮播图

目录 1. 轮播图介绍 2. 实现轮播图 2.1 准备工作 1、准备至少三张图片&#xff0c;并将图片文件名改为数字123 2、搭好HTML的标签 3、写好按钮和图片标签 ​编辑 2.2 单向绑定图片 2.3 在按钮里使用方法 2.4 运行代码 3. 完整代码 1. 轮播图介绍 首先&#xff0c;什么是…...

编程日记 2025/9/18 0:23:20

C#中UI线程的切换与后台线程的使用

文章速览 UI线程切换示例 后台线程使用示例 两者对比适用场景Application.Current.Dispatcher.InvokeTask.Factory.StartNew 执行同步性Application.Current.Dispatcher.InvokeTask.Factory.StartNew 一个赞&#xff0c;专属于你的足迹&#xff01; UI线程切换 在WPF应用程序…...

编程日记 2025/7/15 9:14:35

微信小程序 自定义图片分享-绘制数据图片以及信息文字

一 、需求 从数据库中读取头像&#xff0c;姓名电话等信息&#xff0c;当分享给女朋友时&#xff0c;每个信息不一样 二、实现方案 1、先将数据库中需要的头像姓名信息读取出来加载到data 数据项中 data:{firstName:, // 姓名img:, // 头像shareImage:,// 存储临时图片 } 2…...

编程日记 2025/9/18 3:20:00

优艾智合机器人助力半导体智造，领跑国产化替代浪潮

在全球半导体产业加速自动化转型的背景下&#xff0c;传统物流已成为制约智能化升级的关键瓶颈。作为中国移动机器人行业的领军企业&#xff0c;优艾智合&#xff08;YOUIBOT&#xff09;自2017年起就敏锐洞察到"半导体设备国产化"的紧迫需求&#xff0c;依托在工业移…...

编程日记 2025/9/9 11:14:03

关于 TCP 端口 445 的用途以及如何在 Windows 10 或 11 上禁用它

TCP 端口 445 主要用于直接通过 TCP/IP 访问 Microsoft 网络，无需使用 NetBIOS 层。此服务自 Windows 2000 和 Windows XP 开始在 Windows 中提供。在 Windows NT/2K/XP 中，SMB（Server Message Block）协议用于文件共享等。它在 Windows NT 中运行在 NetBT（NetBIOS over TC…...

编程日记 2025/6/8 14:55:45

C语言_coredump深度解析

在 C/C++ 开发中，Core Dump 是解决程序崩溃问题的重要手段。本文将系统介绍 Core Dump 的概念、用途、常见原因及调试方法，结合具体代码示例，帮助开发者快速定位和解决问题。 一、Core Dump 是什么？ Core Dump（核心转储）是操作系统在进程异常终止时，将进程的内存镜像、…...

编程日记 2025/6/21 4:37:51

全栈项目中是否可以实现统一错误处理链？如果可以，这条链路该如何设计？需要哪些技术支撑？是否能同时满足性能、安全性和用户体验需求？

在复杂系统中&#xff0c;错误一旦出现&#xff0c;可能不断扩散&#xff0c;直到让整个系统宕机。尤其在一个全栈项目中&#xff0c;从数据库到服务器端逻辑、再到前端用户界面&#xff0c;错误可能在任意一个环节产生。如果我们不能在全栈范围内实现统一的错误处理机制&#…...

编程日记 2025/9/19 8:32:24

Twitter数据采集新选择：twitterapi.io全面评测与实战指南

之前我在CSDN上分享过如何高效获取Twitter数据&#xff1a;Apify平台上的推特数据采集解决方案_tweet scraper v2 (pay per result)-CSDN博客&#xff0c;当时介绍了如何利用Apify平台抓取Twitter数据。虽然Apify提供了不错的解决方案&#xff0c;但在实际项目中我遇到了一些瓶…...

编程日记 2025/6/16 10:00:57

排序01：多目标模型

用户-笔记的交互 对于每篇笔记&#xff0c;系统记录曝光次数、点击次数、点赞次数、收藏次数、转发次数。 点击率点击次数/曝光次数 点赞率点赞次数/点击次数 收藏率收藏次数/点击次数 转发率转发次数/点击次数 转发是相对较少的&#xff0c;但是非常重要&#xff0c;例如转发…...

编程日记 2025/9/6 11:24:59

Dify中使用插件LocalAI配置模型供应商报错

服务器使用vllm运行大模型&#xff0c;今天在Dify中使用插件LocalAI配置模型供应商后&#xff0c;使用工作流的时候&#xff0c;报错&#xff1a;“Run failed: PluginInvokeError: {"args":{},"error_type":"ValueError","message":&…...

编程日记 2025/9/23 8:17:58

初识计算机网络。计算机网络基本概念，分类，性能指标

初识计算机网络。计算机网络基本概念&#xff0c;分类&#xff0c;性能指标 本系列博客源自作者在大二期末复习计算机网络时所记录笔记&#xff0c;看的视频资料是B站湖科大教书匠的计算机网络微课堂&#xff0c;祝愿大家期末都能考一个好成绩&#xff01; 视频链接地址 一、…...

编程日记 2025/9/19 7:00:10

【Python 操作 MySQL 数据库】

在 Python 中操作 MySQL 数据库主要通过 pymysql 或 mysql-connector-python 库实现。以下是完整的技术指南&#xff0c;包含连接管理、CRUD 操作和最佳实践&#xff1a; 一、环境准备 1. 安装驱动库 pip install pymysql # 推荐&#xff08;纯Python实现&#xff0…...

编程日记 2025/9/20 19:16:45

标贝科技：大模型领域数据标注的重要性与标注类型分享

当前&#xff0c;大模型作为人工智能领域的前沿技术&#xff0c;其强大的泛化能力和复杂任务处理能力&#xff0c;依赖于海量数据的训练。而数据标注&#xff0c;作为连接原始数据与大模型训练的关键桥梁&#xff0c;在这一过程中发挥着举足轻重的作用。​ 大模型的训练依赖海…...

编程日记 2025/8/10 3:16:51

C++ QT图片查看器

private:QList<QString> fs;int i;void MainWindow::on_btnSlt_clicked() {QStringList files QFileDialog::getOpenFileNames(this,"选择图片",".","Images(*.png *.jpg *.bmp)");qDebug()<<files;ui->picList->clear();ui-…...

编程日记 2025/9/19 2:34:48

数据集-目标检测系列- 杨桃 数据集 Starfruit＞＞ DataBall

数据集-目标检测系列- 杨桃 数据集 Starfruit&#xff1e;&#xff1e; DataBall * 相关项目 1&#xff09;数据集可视化项目&#xff1a;gitcode: https://gitcode.com/DataBall/DataBall-detections-100s/overview 2&#xff09;数据集训练、推理相关项目&#xff1a;GitH…...

编程日记 2025/9/21 11:15:16

【Linux网络】网络套接字编程

套接字编程 一&#xff0c;理解端口号二&#xff0c;初识TCP/UDP协议三&#xff0c;网络字节序四&#xff0c;UDP套接字编程常用API4.1 struct sockaddr类型4.2 socket接口4.3 bind接口4.4 recvfrom4.5 sendto 五&#xff0c;TCP套接字常用API5.1 listen接口5.2 accept接口5.3 …...

编程日记 2025/9/5 22:30:27

【data】上海膜拜数据

数据初始样貌 一、数据预处理 1. 数据每5分钟栅格统计 时间数据的处理 path"mobike_shanghai.csv" dfpd.read_csv(path) # 获取时间信息&#xff0c;对于分钟信息&#xff0c;5分钟取整 def time_info(df,col): df[datetime] pd.to_datetime(df[col])df[wee…...

编程日记 2025/9/15 3:53:36

文件相关操作

文本文件 程序运行时产生的数据都属于临时数据&#xff0c;程序一旦运行结束都会被释放 通过文件可以将数据持久化 C的文件操作需要包含头文件 文件分类 文本文件&#xff1a;文件以文本的ASCII码形式存储在计算机中 二进制文件&#xff1a;文件以文本的二进制形式存储在计算…...

编程日记 2025/6/19 13:45:52

DDS（数据分发服务） 和 P2P（点对点网络） 的详细对比

1. 核心特性对比 维度 DDS P2P 实时性 微秒级延迟&#xff0c;支持硬实时&#xff08;如自动驾驶&#xff09; 毫秒至秒级&#xff0c;依赖网络环境&#xff08;如文件传输&#xff09; 架构 去中心化发布/订阅模型&#xff0c;节点自主发现 完全去中心化&#xff0c;节…...

编程日记 2025/9/6 13:36:17

Web 架构之攻击应急方案

文章目录 一、引言二、常见 Web 攻击类型及原理2.1 SQL 注入攻击2.2 跨站脚本攻击&#xff08;XSS&#xff09;2.3 分布式拒绝服务攻击&#xff08;DDoS&#xff09; 三、攻击检测3.1 日志分析3.2 入侵检测系统&#xff08;IDS&#xff09;/入侵防御系统&#xff08;IPS&#x…...

编程日记 2025/9/19 19:14:08

探索嵌入式硬件的世界：技术、应用与未来趋势

目录 一、什么是嵌入式硬件&#xff1f; 二、嵌入式硬件的核心组件与架构 1. 微处理器与控制器 2. 存储器设备 3. 输入/输出接口 4. 电源管理模块 5. 时钟芯片与时序控制 三、嵌入式硬件的设计原则与技术难点 1. 低功耗与能耗优化 2. 小型化与高度集成 3. 高可靠性和…...

编程日记 2025/7/15 6:32:33

【LeetCode 热题 100】动态规划 系列

&#x1f4c1; 70. 爬楼梯 状态标识&#xff1a;爬到第i层楼梯时&#xff0c;有多少种方法。 状态转移方程&#xff1a;dp[i] dp[i-1] dp[i-2]&#xff0c;表示从走一步和走两步的方式。 初始化&#xff1a;dp[1] 1 , dp[2] 2。 返回值&#xff1a;dp[n]&#xff0c;即走到…...

编程日记 2025/9/6 11:49:17

[特殊字符] Maven配置阿里云镜像终极指南（2024最新版）

文章目录 &#x1f31f; 为什么要配置镜像仓库&#xff1f;&#xff08;血泪教训&#xff09;&#x1f6e0;️ 准备工作&#xff08;必看&#xff01;&#xff09;&#x1f680; 三步搞定镜像配置&#xff08;抄作业版&#xff09;步骤1&#xff1a;打开settings.xml步骤2&…...

编程日记 2025/8/18 20:58:36

计网实验笔记（一）CS144 Lab1

Lab0 ByteStream : 实现一个在内存中的 有序可靠字节流Lab1 StreamReassembler&#xff1a;实现一个流重组器&#xff0c;一个将字节流的字串或者小段按照正确顺序来拼接回连续字节流的模块Lab2 TCPReceiver&#xff1a;实现入站字节流的TCP部分。Lab3 TCPSender&#xff1a;实…...

编程日记 2025/9/20 22:12:10

使用 OpenCV 将图像中标记特定颜色区域

在计算机视觉任务中&#xff0c;颜色替换是一种常见的图像处理操作&#xff0c;广泛用于视觉增强、目标高亮、伪彩色渲染等场景。本文介绍一种简单而高效的方式&#xff0c;基于 OpenCV 检测图像中接近某种颜色的区域&#xff0c;并将其替换为反色&#xff08;对比色&#xff0…...

编程日记 2025/9/21 23:19:49

智源联合南开大学开源Chinese-LiPS中文多模态语音识别数据集

2025年5月6日&#xff0c;智源研究院在法国巴黎举行的GOSIM全球开源创新论坛上发布Chinese-LIPS中文多模态语音识别数据集&#xff0c;该数据为智源研究院联合南开大学共同构建。 在语音识别技术飞速发展的背景下&#xff0c;多模态语音识别正逐步成为学术界和工业界的研究热点…...

编程日记 2025/9/19 6:02:04

RabbitMQ最新入门教程

文章目录 RabbitMQ最新入门教程1.什么是消息队列2.为什么使用消息队列3.消息队列协议4.安装Erlang5.安装RabbitMQ6.RabbitMQ核心模块7.RabbitMQ六大模式7.1 简单模式7.2 工作模式7.3 发布订阅模式7.4 路由模式7.5 主题模式7.6 RPC模式 8.RabbitMQ四种交换机8.1 直连交换机8.2 主…...

编程日记 2025/9/20 10:41:09

python爬虫实战训练

前言&#xff1a;哇&#xff0c;今天终于能访问豆瓣了&#xff0c;前几天爬太多次了&#xff0c;网页都不让我访问了&#xff08;要登录&#xff09;。 先来个小练习试试手吧&#xff01; 爬取豆瓣第一页&#xff08;多页同上篇文章&#xff09;所有电影的排名、电影名称、星…...

编程日记 2025/9/6 13:34:49

[特殊字符]CentOS 7.6 安装 JDK 11（适配国内服务器环境）

在国内服务器&#xff08;如阿里云、腾讯云&#xff09;中安装 JDK 11 时&#xff0c;可能由于访问 Oracle 官网较慢导致下载不便。本文将详细介绍如何在 CentOS 7.6 上安装 OpenJDK 11 和 Oracle JDK 11&#xff0c;并推荐使用国内镜像源加速安装过程。 &#x1f9e9; 目录 一…...

编程日记 2025/6/16 21:29:41

Redis（三） - 使用Java操作Redis详解

文章目录 前言一、创建项目二、导入依赖三、键操作四、字符串操作五、列表操作六、集合操作七、哈希表操作八、有序集合操作九、完整代码1. 完整代码2. 项目下载 前言 本文主要介绍如何使用 Java 操作 Redis 数据库&#xff0c;涵盖项目创建、依赖导入及 Redis 各数据类型&…...

编程日记 2025/9/21 7:19:13