Vue3中实现轮播图

[1. 轮播图介绍](#1. 轮播图介绍)

[2. 实现轮播图](#2. 实现轮播图)

[2.1 准备工作](#2.1 准备工作)

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

2、搭好HTML的标签

3、写好按钮和图片标签

编辑

[2.2 单向绑定图片](#2.2 单向绑定图片)

[2.3 在按钮里使用方法](#2.3 在按钮里使用方法)

[2.4 运行代码](#2.4 运行代码)

[3. 完整代码](#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. 完整代码

html 复制代码

<!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() {
                //定义图片id
                const 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>