vue 轮播图片

最新推荐文章于 2025-12-01 09:37:55 发布

原创

最新推荐文章于 2025-12-01 09:37:55 发布 · 2.8k 阅读

12 ·

CC 4.0 BY-SA版权

文章标签：

#vue #轮播

本文介绍了如何使用Vue框架来创建一个轮播图片的效果，包括展示最终实现的效果图和具体的实现案例。

1、效果图
在这里插入图片描述
2、案例

	<template>
	   <section class="body">
	       <section class="wrap">
	           <swiper :options="swiperOption" class="swiper-wrap"  ref="mySwiper" v-if="banner.length!=0">
	               <swiper-slide v-for="(item,index) in banner" :key="index" >
	                   //点击图片跳到哪里,这里跳到home页面 item举例：{img:http://www.***.com/home/images/index_img02.png,url:/home}
	                   <img :src="item.img" alt="" @click="skip_out_page(item.url)" />
	               </swiper-slide>
	               <!-- 常见的小圆点 -->
	               <div class="swiper-pagination"  v-for="(item,index) in banner" :key="index" slot="pagination" ></div>
	           </swiper>
	       </section>
	   </section>
	</template>