解决vue中使用swiper插件

模拟从后台取下数据，然后数据绑定在swiper标签中。

[html]  view plain  copy

1. <template>  
2.     <div class="homePage">  
3.         <abc></abc>  
4.         <div id="banner">  
5.             <div class="swiper-container">  
6.                   <div class="swiper-wrapper">  
7.                   <div class="swiper-slide" v-for="items in swiper" ><a href=""><img :src="items.activity.img"></a></div>  
8.                   </div>  
9.                   <div class="swiper-pagination"></div>  
10.             </div>  
11.         </div>  
12.     </div>   
13. </template>  

[html]  view plain  copy

1. <script>   
2. import Swiper from "../../static/js/swiper-3.4.0.min.js";  
3. import header from 'components/header.vue';  
4. export default {  
5.    components : {  
6.      abc : header  
7.   },  
8.   data(){  
9.     return {  
10.        swiper:""   
11.     }    
12.   },  
13.   mounted(){  
14.     this.$http.get("http://www.vrserver.applinzi.com/aixianfeng/apihome.php").then(function(res){  
15.             this.swiper=res.data.data.slide;   
16.             var mySwiper = new Swiper('.swiper-container', {  
17.             autoplay: 2000,//可选选项，自动滑动  
18.                 //分页器  
19.             pagination : '.swiper-pagination',  
20.             paginationClickable :true,  
21.             observer: true   
22.             })  
23.         })  
24.     }  
25.   
26. }  
27. </script>  
28. <style type="text/css">  
29.    @import "../../static/css/home.css";  
30.    @import "../../static/css/swiper-3.4.0.min.css";  
31. </style>  

 重点就在mounted()的使用，需要把这些方法都放在 mounted()里使用， mounted()是  vue 生命周期钩子  ，你也可以理解为当挂载实例到 DOM完了后，才会触发的而方法。