用vue实现一个轮播图

  data() {
    return {
      data: [
        '../../image/home/banner.jpeg',
        '../../image/home/banner.jpeg',
        '../../image/home/banner.jpeg'
      ],
      currentIndex: 0,
      timer: null,
      islogin: getToken()
    }
  },

<template>
  <div class="banner">         
    <div class="item">         
      <img :src="data[currentIndex]">                                                                                                                                                                     
    </div>
    <div class="page" v-if="this.data.length > 1">
      <ul>
        <li @click="gotoPage(prevIndex)">&lt;</li>
        <li v-for="(item,index) in data" @click="gotoPage(index)" :class="{'current':currentIndex == index}">  {{index+1}}</li>
        <li @click="gotoPage(nextIndex)">&gt;</li>
      </ul>                    
    </div>
  </div>
</template> 

<style lang="scss" scoped>
.banner {
  position: relative;          
  margin-bottom: 0.7rem;       
    .current {                 
      color: #ff6700;          
    }
    .page {                    
      background: rgba(0,0,0,.5);     
      position: absolute;
      right: 0;                
      bottom: 0;               
      width: 100%;             
        ul{                    
          float: right;        
        }
    }
    ul li {                    
      list-style: none;        
      float: left;             
      width: 30px;             
      height: 40px;            
      line-height: 40px;
      text-align: center;
      cursor: pointer;
      color: rgba(255,255,255,.8);    
      font-size: 14px;
    }
}
.banner img {
  width: 100%;
  max-height: 680px;
}
</style> 

  computed: {                  
    prevIndex() {              
      if (this.currentIndex === 0) {
        return this.data.length - 1
      } else {                 
        return this.currentIndex - 1
      }
    },
    nextIndex() {              
      if (this.currentIndex === this.data.length - 1) {
        return 0               
      } else {                 
        return this.currentIndex + 1
      }
    }
  },

    gotoPage(index) {
      this.currentIndex = index                                                                                                                                                                           
    }

    runInv() {                 
      this.timer = setInterval(() => {
        this.gotoPage(this.nextIndex)
      }, 3000)
    },