vue组件-轮播（carousel）

轮播是web开发中常用的组件，下面使用vue来构建一个简单的轮播组件，主要是从一个jquery轮播重构来的：
VUE轮播在线demo+源码地址：https://codepen.io/shayminsky21/pen/OORQVw
jquery轮播在线地址+源码：https://codepen.io/shayminsky21/pen/XzJgEp

首先是VUE的模板：

<carousel :picdata="pics"></carousel> </main><script type="text/x-template" id="carousel"><div id="carousel"><div v-for="(item,index) in picdata" :class="{'selected': index==curpic, 'next':index==curpic+1, 'nextRightSecond':index==curpic+2,'prev':index==curpic-1,'prevLeftSecond':index==curpic-2,'hideLeft':index<curpic-2,'hideRight':index>curpic+2}"  @click="select(index)"><img v-bind:src="item.src"></div></div> 

模板非常简单，使用v-for来遍历pics数组里的url，然后将img标签的src设定为对应的图片的url，index则可以记录每张图片所对应的序号，这样就可以根据组简历curpic的值来计算出每个图片对应的class，然后动态渲染。每张图片都绑定click事件，来触发模板的select方法并且将点击图片的index作为参数传入。

接下来是组件的逻辑部分：

Vue.component('carousel', {template: '#carousel',   props: {   picdata: Object  },data: function () {  return {         curpic:2,   }},   methods: {    select: function (index) {         this.curpic=index;   }     }})

组件部分的通过props的picdata属性来从父组件中获取到图片的url数据，组件中data里的curpic可以用来设置默认的当前图片序号，并且在之后记录当前选中图片的序号，通过这个数据，组件会为每个图片分配相应的class，然后渲染。
组件目前只有一个方法：select，用来吧curpic设置成为当前选中的图片的序号。

数据输入格式即一个对象数组。记录图片的url。

var pic=[ { src: "https://s16.postimg.org/vklrwoxtx/cover9.jpg"},          { src: "https://s16.postimg.org/cgsggckzp/cover8.jpg"},          {src:"https://s16.postimg.org/emmrauog5/cover7.jpg"},          {src:"https://s16.postimg.org/9drqcz611/cover1.jpg"},         {src:"https://s16.postimg.org/pnhwfvgp1/cover6.jpg"},         {src:"https://s16.postimg.org/fij8qay4l/cover3.jpg"}    ];

大家可以根据这个简单的轮播模板添加自己想要的功能