解决vue中使用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>

<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完了后，才会触发的而方法。