Vue轮播图

* {
    margin: 0;
    padding: 0;
}
ul li {
    list-style: none;
    float: left;
    width: 3rem;
    height: 4rem;
    line-height: 4rem;
    text-align: center;
    cursor: pointer;
    color: rgba(255,255,255,.8);
    font-size: 1.6rem;
}
.banner {
    max-width: 50rem;
    margin: 0 auto;
    position: relative;
    margin-top: 6rem;
}
.banner .item{
    display: flex;
    justify-content: center;
    align-items: center;
}
.banner img {
    height: 40rem;
    width: auto;
    display: block;
}
.banner .page {
    background: rgba(0,0,0,.5);
    position: absolute;
    right: 0;
    bottom: 0;
    width: 100%;
    display: flex;
    justify-content: center;
}
.current {
    color: #ff6700;
}

Vue.component('carousel', {
    props:{
      imglist: Array
    },
    data: () => {
        return {
            currentIndex: 0,   //默认显示图片
            timer: null    //定时器
        }
    },
    template: `
    <div class="banner">
        <div class="item">
            <img :src="imglist[currentIndex]">
        </div>
        <div class="page" v-if="imglist.length > 1">
            <ul>
                <li @click="gotoPage(prevIndex)">&lt;</li>
                <li v-for="(item,index) in imglist" @click="gotoPage(index)" :class="{'current':currentIndex == index}">{{index+1}}</li>
                <li @click="gotoPage(nextIndex)">&gt;</li>
            </ul>
        </div>
    </div>
    `,
    computed: {
        //上一张
        prevIndex() {
          if(this.currentIndex == 0) {
            return this.imglist.length - 1;
          }else{
            return this.currentIndex - 1;
          }
        },
        //下一张
        nextIndex() {
          if(this.currentIndex == this.imglist.length - 1) {
            return 0;
          }else {
            return this.currentIndex + 1;
          }
        }
      },
    methods: {
        gotoPage(index) {
          this.currentIndex = index;
        },
        //定时器
        runInv() {
            this.timer = setInterval(() => {
            this.gotoPage(this.nextIndex)
            }, 1000)
        }
      },
    created(){
    },
    mounted(){
        // this.runInv();
    },
    updated(){
        // console.log('updated');
    }
})