解决vue中使用swiper插件——李帅醒博客
2017-02-13 22:10
676 查看
解决vue中使用swiper插件,在引入swiper插件后,发现无法正常运行
这次我们模拟从后台取下数据,然后数据绑定在swiper标签中。
<template>
<div class="homePage">
<abc></abc>
<div id="banner">
<div class="swiper-container">
<div class="swiper-wrapper">
<div class="swiper-slide" v-for="items in swiper" ><a href=""><img :src="items.activity.img"></a></div>
</div>
<div class="swiper-pagination"></div>
</div>
</div>
</div>
</template>
,你也可以理解为当挂载实例到 DOM完了后,才会触发的而方法。
Vue-resource实现ajax请求和跨域请求--李帅醒博客 (vue http://blog.csdn.net/wcslb/article/details/55057010)
(我吃酸萝卜
新浪微博http://www.weibo.com/wcslb ---李帅醒著)
这次我们模拟从后台取下数据,然后数据绑定在swiper标签中。
<template>
<div class="homePage">
<abc></abc>
<div id="banner">
<div class="swiper-container">
<div class="swiper-wrapper">
<div class="swiper-slide" v-for="items in swiper" ><a href=""><img :src="items.activity.img"></a></div>
</div>
<div class="swiper-pagination"></div>
</div>
</div>
</div>
</template>
<script> import Swiper from "../../static/js/swiper-3.4.0.min.js"; import header from 'components/header.vue'; export default { components : { abc : header }, data(){ return { swiper:"" } }, mounted(){ this.$http.get("http://www.vrserver.applinzi.com/aixianfeng/apihome.php").then(function(res){ this.swiper=res.data.data.slide; var mySwiper = new Swiper('.swiper-container', { autoplay: 2000,//可选选项,自动滑动 //分页器 pagination : '.swiper-pagination', paginationClickable :true, observer: true }) }) } } </script> <style type="text/css"> @import "../../static/css/home.css"; @import "../../static/css/swiper-3.4.0.min.css"; </style>重点就在mounted()的使用,需要把这些方法都放在 mounted()里使用, mounted()是 vue生命周期钩子
,你也可以理解为当挂载实例到 DOM完了后,才会触发的而方法。
Vue-resource实现ajax请求和跨域请求--李帅醒博客 (vue http://blog.csdn.net/wcslb/article/details/55057010)
(我吃酸萝卜
新浪微博http://www.weibo.com/wcslb ---李帅醒著)
相关文章推荐
- 解决vue中使用swiper插件问题及swiper在vue中的用法
- Vue.js devtool插件安装后无法使用的解决办法
- vue轮播图插件vue-awesome-swiper的引入及使用
- 使用vue-awesome-swiper滑块插件
- vue引入swiper插件的使用实例
- 使用vue-aplayer插件时出现的问题的解决
- Vue.js devtool插件安装后无法使用的解决办法
- vue轮播图插件vue-awesome-swiper的使用
- Vue项目使用swiper做轮播图时,异步调用数据时导致图片不能滑动的解决方法
- Vue.js devtool插件安装后无法使用的解决办法【最简单有效的解决方法】
- 解决Angular.js中使用Swiper插件不能滑动的问题
- Vue Google浏览器插件 Vue Devtools无法使用的解决办法
- vue-awesome-swiper滑块插件使用方法详解
- vue轮播图插件vue-awesome-swiper的使用代码实例
- vue轮播图插件vue-awesome-swiper的使用
- 使用vue-awesome-swiper滑块插件
- 使用vue-cli搭建脚手架后引入插件swiper失效
- 使用WebLogic的OTN插件时Eclipse控制台输出中文乱码解决方法
- 使用jrebel插件解决修改项目中的class导致server重启问题-----for resin server
- Firefox6 使用 firebug 解决方法 以及迅雷(thunder)插件报错