vue组件-轮播（carousel）

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

首先是VUE的模板：

"pics">
 
<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':indexcurpic+2}"  @click="select(index)">"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"}
    ];

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