vue.js使用swiper插件

swiper是我之前做前端页面会用到的一个插件，我自己认为是非常好用的。swiper提供了形式多种多样、适应各个终端的轮播图效果。本人前端菜鸟，最近在学习vue，也正式开始在项目中使用vue.js来构建页面。

按照之前做带有动态数据轮播的方法，我肯定会用ajax来渲染。用过了vue.js之后，发现它渲染数据还是相对来说比较方便的。下面是我初次在项目中使用vue.js：

1、首先在项目中安装vue

2、在main.js中引入swiper

require('swiper/dist/css/swiper.css')
import VueAwesomeSwiper from 'vue-awesome-swiper'
Vue.use(VueAwesomeSwiper)

3、HTML代码部分：

<ul class="swiper-wrapper" id="activityList">
    <li class="swiper-slide" v-for="(act,index) in actList" v-if="index<9">
	<a href="">
	    <div class="activity-content1">
		<p class="activity-title" v-bind="act.title"></p>
		<p class="activity-time">活动时间：<span v-bind="act.time"></span></p>
	    </div>
	</a>
    </li>
</ul>

4、js代码：

var activity=new Vue({
    el:"#activityList",
    data:{
    actList:[],
    getActUrl:'你的URL'
},created:function(){
    this.getAct()//接口定义方法
},methods:{
    getAct:function(){
        var that=this;
        that.$http({
        method:'GET',
        url:this.getActUrl
    }).then(function(response){
            this.actList=response.data;
            var mySwiper = new Swiper('.swiper-container', {  
            autoplay: 2000            
            })  

},function(error){
     })
}
}
});