vue中如何使用轮播图插件vue-awesome-swiper
这篇文章主要介绍了vue中如何使用轮播图插件vue-awesome-swiper,具有一定借鉴价值,感兴趣的朋友可以参考下,希望大家阅读完这篇文章之后大有收获,下面让小编带着大家一起了解一下。
10年积累的网站设计制作、网站设计经验,可以快速应对客户对网站的新想法和需求。提供各种问题对应的解决方案。让选择我们的客户得到更好、更有力的网络服务。我虽然不认识你,你也不认识我。但先网站制作后付款的网站建设流程,更有新市免费网站建设让你可以放心的选择与我们合作。
Vue-Awesome-Swiper
轮播图插件,可以同时支持Vue.js(1.X ~ 2.X),兼顾PC和移动端,SPA和SSR。
例子
例子
安装设置
安装Install vue-awesome-swiper
npm install vue-awesome-swiper --save
vue挂载
// import import Vue from 'vue' import VueAwesomeSwiper from 'vue-awesome-swiper' // or require var Vue = require('vue') var VueAwesomeSwiper = require('vue-awesome-swiper') // mount with global Vue.use(VueAwesomeSwiper) // If used in Nuxt.js/SSR, you should keep it only in browser build environment // The `Process. BROWSER_BUILD` itself is just a feature, it is only valid in Nuxt.js, you need to modify it according to your own procedures, such as: in vue official ssr scaffolding it should be` process.browser` if (process.BROWSER_BUILD) { const VueAwesomeSwiper = require('vue-awesome-swiper/ssr') Vue.use(VueAwesomeSwiper) } // mount with component(can't work in Nuxt.js/SSR) import { swiper, swiperSlide } from 'vue-awesome-swiper' export default { components: { swiper, swiperSlide } }
SPA与SSR中使用方法的区别
SPA通过组件作用,需要借助ref属性查找swiper实例
SSR通过命令作用,需要借助命令参数查找swiper实例
其他配置和事件一致
SSR中的应用
SPA中的应用
I'm Slide 1 I'm Slide 2 I'm Slide 3 I'm Slide 4 I'm Slide 5 I'm Slide 6 I'm Slide 7
异步数据例子
I'm Slide {{ slide }}
感谢你能够认真阅读完这篇文章,希望小编分享的“vue中如何使用轮播图插件vue-awesome-swiper”这篇文章对大家有帮助,同时也希望大家多多支持创新互联,关注创新互联行业资讯频道,更多相关知识等着你来学习!
网站名称:vue中如何使用轮播图插件vue-awesome-swiper
新闻来源:http://ybzwz.com/article/ppicdo.html