用vue写最简单的图片轮播

通过左右箭头控制图片轮播

效果展示：

html部分：

<div id="app">

        <div id="box">

            <span v-show="index!=0" @click="prev">

                <img src="../image/left.webp" width="70">

            </span>

            <img v-bind:src="imgSrc[index]" width="200">

            <span v-show="index<imgSrc.length-1" @click="next">

                <img src="../image/right.webp" width="70">

            </span>

        </div>

</div>

vue部分：

var app=new Vue({
            el:"#app",
            data:{
                imgSrc:["../image/1.jpg",
                "../image/2.webp",
                "../image/3.webp"],
                index:0
            },
            methods: {
                prev:function(){
                    this.index--
                },
                next:function(){
                    this.index++
                }
            }
})