vue轮播图

vue轮播图 实现

<div class="layui-container" id="app">
    <div class="layui-row">
        <div class="layui-col-md7" >
            <div v-for="(item,index) in arr ">
                <img :src="item.pic" v-if="index==current">
            </div>
        </div>
    </div>

<script>
    new Vue({
        el: '#app',
        data () {
            return {
               
                arr:null,
                current:0
            }
        },
            mounted() {
                axios
               .get('http://**********ble')
                .then(response=>(
                    this.arr = response.data.msg
                ))
                .catch(function (error) {
                    console.log(error)
                })
                this.autoplay()

        },
        methods:{
            autoplay:function () {
                let that = this
                setInterval(function () {
                that.current ++
                    if (that.current ==that.arr.length){
                        that.current =0
                    }
                },2000)
            },

        }


    })

</script>