vue.js使用swiper插件

最新推荐文章于 2024-10-10 17:01:55 发布

前端小白白白

最新推荐文章于 2024-10-10 17:01:55 发布

阅读量2.3k

点赞数

分类专栏： vue.js

本文链接：https://blog.csdn.net/beibingkuo4600/article/details/80427708

版权

这篇博客介绍了如何在Vue.js项目中使用swiper插件创建轮播图。作者作为前端新手，分享了自己从使用ajax渲染数据转向使用vue.js的体验，并详细列举了在项目中集成swiper的步骤，包括在项目中安装vue、在main.js中引入swiper以及HTML和JS代码的编写。

摘要由CSDN通过智能技术生成

swiper是我之前做前端页面会用到的一个插件，我自己认为是非常好用的。swiper提供了形式多种多样、适应各个终端的轮播图效果。本人前端菜鸟，最近在学习vue，也正式开始在项目中使用vue.js来构建页面。

按照之前做带有动态数据轮播的方法，我肯定会用ajax来渲染。用过了vue.js之后，发现它渲染数据还是相对来说比较方便的。下面是我初次在项目中使用vue.js：

1、首先在项目中安装vue

2、在main.js中引入swiper

require('swiper/dist/css/swiper.css')
import VueAwesomeSwiper from 'vue-awesome-swiper'
Vue.use(VueAwesomeSwiper)

3、HTML代码部分：

<ul class="swiper-wrapper" id="activityList">
    <li class="swiper-slide" v-for="(act,index) in actList" v-if="index<9">
	<a href="">
	    <div class="activity-content1">
		<p class="activity-title" v-bind="act.title"></p>
		<p class="activity-time">活动时间：<span v-bind="act.time&#