vue学习之路(二)--vue-awesome-swiper
来源:互联网 发布:医院网络拓扑结构图 编辑:程序博客网 时间:2024/06/07 20:31
安装:npm install vue-awesome-swiper --save
注册:
Main.js:
import VueSwiper from 'vue-awesome-swiper';Vue.use(VueSwiper);
使用:
Header.vue
<template>
<swiper :options="swiperOption"> //vue组件标签
<swiper-slide><img src="./0.jpg"width="100%"> </swiper-slide>
<swiper-slide><img src="./0.jpg"width="100%"> </swiper-slide>
<swiper-slide><img src="./0.jpg"width="100%"> </swiper-slide>
</swiper>
</template>
<script type="text/ecmascript-6">
import{ swiper,swiperSlide } from'vue-awesome-swiper';
调用swiper
require('swiper/dist/css/swiper.css');
调用 swiper.css
export default{
components: { 组件注册
swiper,
swiperSlide
},
data() {
return{
swiperOption: { swiperOption是上面的options值
loop:true,
autoplay:3000,
autoplayDisableOnInteraction:false
}
};
}
};
</script>
- vue学习之路(二)--vue-awesome-swiper
- vue-awesome-swiper(轮播图vue插件)
- vue-awesome-swiper
- vue-awesome-swiper轮播图实践
- vue.js+vue-awesome-swiper轮播
- vue中使用轮播图 vue-awesome-swiper
- 使用vue-awesome-swiper滑块插件
- 使用vue-awesome-swiper滑块插件
- vue-awesome-swiper 自动轮播问题
- vue轮播图插件vue-awesome-swiper的使用
- vue轮播图插件vue-awesome-swiper的使用
- vue轮播图插件vue-awesome-swiper的引入及使用
- 学习Vue之路(二)
- awesome-vue
- 关乎vue-awesome-swiper@2.6.7的样式的问题
- vue + swiper
- Vue+Swiper
- vue学习之路(一)--vue-cli安装+vue-router+vue-resource
- Win 10更新MinGW
- 藏锋少年与边界诱惑
- 是时候放弃MySQL的五大理由
- OpenGL学习日记1_创建窗口
- python+selenium批量爬取ieeexplore论文
- vue学习之路(二)--vue-awesome-swiper
- bootstrap日期控件
- Spring IOC经典案例
- spring cloud day05【turbine】
- 黑客帝国
- Leetcode58-Length of Last Word
- 今天开通了博客
- 丫丫头-玲珑塔设计教程
- Bean注入