vue实现简单轮播图的第二种方式

<div id="box">
    <img v-show="active==index" v-for="(item, index) in arrs" :key="index" :src="item" alt="">


</div>

<script src='https://cdn.jsdelivr.net/npm/vue@2.6.14/dist/vue.js'></script>
<script>
    new Vue({
        el: "#box",
        data: {
            arrs: ['./img/1.jpg', './img/2.jpg', './img/3.jpg', './img/4.jpg'],
            active: 0

        },
        mounted() {

            setInterval(() => {
                if (this.active >= this.arrs.length-1) {
                    this.active = 0
                }
                this.active++

            }, 1000);

        },
    })
</script>