因为之前一直在忙公司的项目，vue这块就生疏了不少，正好借这个小demo复习下vue的知识。
先来个效果图：
如图所示，实现的就是一个间隔2.5s自动向左切换下一张的轮播图，同时鼠标移入停止轮播，移出回复轮播；
而下方按钮会根据当前图片自动变红且可以手动控制当前图片。
思路：
整个demo分为轮播图片和控制span两个部分。
按照前端工程化的需求来说，这两个部分应该解耦成两个component最后再导入页面比较合理，但由于demo较为简单，
作为练手就不搞那么复杂了，对项目有追求【强迫症】的童鞋可以往组件化的目标靠，具体方法参考我之前的博文。
第一步，先写出整体框架：
<template>
<div class="slide">
<div class="slideshow">
<ul>
<li v-for="(img, index) in imgArray" :key="index">
<a href="#">
<img :src='img'>
</a>
</li>
</ul>
</div>
<div class="bar">
<span v-for="(item, index) in imgArray" :key="index"></span>
</div>
</div>
</template>
我们使用v-for列表渲染两个部分，值得注意的是列表渲染最好要提供一个key值，至于为什么官方文档说得很复杂，
就我所知的是如果不加key值在使用transition-group也就是过渡效果的时候会出现bug，官方给出的建议也是尽可能
在列表渲染的时候加上key值，百利无一害，养成习惯就好。
第二步：
在上一步我们渲染的是一个img数组，具体：
data () {
return {
imgArray: [
'../static/timg1.jpg',
'../static/timg2.jpg',
'../static/timg3.jpg',
'../static/timg4.jpg'
]
}
}
然后实现轮播的原理就是创建一个变量与当前遍历的index值比对，若相同则显示，否则隐藏；
同时下方按钮index若也与变量相同则当前按钮变为活跃状态即背景变红。
<template>
<div class="slide">
<div class="slideshow">
<ul>
<li v-for="(img, index) in imgArray" v-show="index===mark" :key="index">
<a href="#">
<img :src='img'>
</a>
</li>
</ul>
</div>
<div class="bar">
<span v-for="(item, index) in imgArray" :class="{ 'active':index===mark }" :key="index"></span>
</div>
</div>
</template>
第三步：