vue之简单轮播图

首先简单说一下，这个轮播图的功能，有点击功能，包含点击下一张，上一张，和点击首页触发定时器，下面贴一下代码：

HTML部分

<div class="nav">
    <img :src="img" @click="bling()"> <!--显示一张图片，并给图片添加点击事件-->
    <ul>
	<li v-for="(item,index) in arr"></li>
    </ul>
    <button @click="prev()">上一张</button>
    <button @click="next()">下一张</button>
</div>

CSS部分

<style>
    img{
        display:block;
        margin:0 auto;
        width:320px;
        height:130px;
    }
    .nav li{
        list-style: none;
    }
</style>

vue.js部分

<script>
		window.onload = function(){
			var nav = new Vue({
				el:'.nav',
				data:{
					img:'goods_pics/q14.jp