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>

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：http://www.mzph.cn/web/80139.shtml

如若内容造成侵权/违法违规/事实不符，请联系多彩编程网进行投诉反馈email:809451989@qq.com，一经查实，立即删除！