本文摘自PHP中文网,作者coldplay.xixi,侵删。
vue.js中使用swiper的方法:首先下载【swiper.js】;然后在【main.js】中全局引入【swiper.js】;最后在模板中配置相关内容即可。
【相关文章推荐:vue.js】
vue.js中使用swiper的方法:
1、下载swiper.js
1 | npm install vue-awesome-swiper --save
|
2、在main.js中全局引入swiper.js
1 2 3 | import VueAwesomeSwiper from 'vue-awesome-swiper'
import 'swiper/dist/css/swiper.css'
Vue. use (VueAwesomeSwiper)
|
3、在模板中配置相关内容
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 | <template>
<swiper :options= "swiperOption" >
<swiper-slide v- for = "item in imglist" >
<img :src= "rootLink+ '/resources/img/' + item.imgPath" />
</swiper-slide>
<div class = "swiper-pagination" slot= "pagination" ></div>
</swiper>
</template>
<script>
import axios from 'axios'
export default {
name: 'carrousel' ,
data() {
return {
rootLink: 'http://119.23.28.239:8080' ,
imglist:[],
swiperOption: {
autoplay: 3000,
loop: true,
pagination : '.swiper-pagination' ,
paginationClickable :true
}
}
},
mounted() {
var vm = this;
axios.get(vm.rootLink + '/train/homePage/banner?type=上面' )
.then( function (data) {
vm.imglist = data.data.data
})
}
}
</script>
|
相关免费学习推荐:JavaScript(视频)
以上就是vue.js怎么用swiper的详细内容,更多文章请关注木庄网络博客!
相关阅读 >>
详解vue.js中如何处理事件
vue.js为什么是轻量的
关于vue使用验证器: veevalidate3
15个vue.js高级面试问题
vue.js如何操作dom
vue.js是基于javascript的吗?
vue.js中的插槽是什么
vue.js怎样刷新组件
vue.js支持ie8吗
vue.js怎样做跳转页面
更多相关阅读请进入《vue.js》频道 >>
人民邮电出版社
本书对 Vue.js 3 技术细节的分析非常可靠,对于需要深入理解 Vue.js 3 的用户会有很大的帮助。——尤雨溪,Vue.js作者
转载请注明出处:木庄网络博客 » vue.js怎么用swiper