vue實現圖片的輪播

   <div class="item">
         <span class="btn left" @click="prevIndex">&lt;</span>
             <div v-for="(imgUrl, index) in bannerList" v-show="index===mark" :key="index" class="slideshow">
                  <a href="#">
                     <img :src=imgUrl>
                  </a>
             </div>
        <span class="btn right" @click="nextIndex">&gt;</span>
    </div>

 data () { return { mark: 0, //比對圖片索引的變量 
 bannerList:[ require('../assets/1.jpg'), require('../assets/2.jpg'), require('../assets/3.jpg'), ] , } },

// 輪播
 methods:{ prevIndex(){ this.mark = this.mark - 1; if(this.mark < 0){ this.mark = 2; } console.log(this.mark); }, nextIndex(){ this.mark = this.mark + 1; if(this.mark == 3){ this.mark = 0; } console.log(this.mark); }, handleClick(tab, event) { console.log(tab, event); }, autoPlay () { this.mark++; if (this.mark === 3) { //當遍歷到最后一張圖片置零 
        this.mark = 0 } }, play () { setInterval(this.autoPlay, 4000) }, change (i) { this.mark = i } }, created () { this.play() }, // 輪播