Vue3中实现轮播图
目录
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>