vue 图片放大左右切换

html部分

<div id="app">
        <div class="imgList">
            <img :src="value" v-for="(value,index) in imgList" :key="value" @click="bigImg(index)">
        </div>
        <div class="imgMask" v-if="showBigImg" @click.stop="showBigImg=!showBigImg">
            <img class="prev"  @click.stop="prev" src="http://cdn.attach.qdfuns.com/notes/pics/201708/28/152301mz6lgplg15rnnrl8.png">
            <div class="showImg" >
                <img class="bigImg" :src="imgList[num]">
            </div>
            <img class="next"  @click.stop="next" src="http://cdn.attach.qdfuns.com/notes/pics/201708/28/152246ozacp0x2pxcecme2.png">
        </div>
    </div>

css 部分

html,body,#app
    {
        height: 100%;
        width:100%;
    }
    *{
        margin: 0;
        padding:0;
        box-sizing:border-box;
    }
    .imgList{
        margin: 0 auto;
        width:900px;
        display: flex;
        flex-direction:row;
        flex-wrap:wrap;
    }
    .imgList img{
        width:300px;
    }
    .imgMask{
        position: absolute;
        height: 100%;
        width:100%;
        top:0;
        left:0;
        z-index: 100;
        background:rgba(0,0,0,.6); 
    }
    .showImg{
        height:550px;
        width:800px;
        position: absolute;
        left:50%;
        top:50%;
        transform:translate(-50%,-50%);
        border:10px solid #fff;
    }
    .bigImg{
        width:100%;
        height:100%;
    }
    .prev{
        position: absolute;
        top:50%;
        left:10px;
        width:40px;
        transform:translate(10px,-50%);
    }
    .next{
        width:40px;
        transform:translate(10px,-50%);
        position: absolute;
        top:50%;
        right:20px;
    }

js部分

var  app = new Vue({
        el:"#app",
        data(){
            return{
                showBigImg:false,
                num:0,
                imgList:[
                "http://cdn.attach.qdfuns.com/notes/pics/201708/28/152247enooreornrre1zca.jpg",
                "http://cdn.attach.qdfuns.com/notes/pics/201708/28/152606vaqgcsqzyhw9dd0q.jpg",
                "http://cdn.attach.qdfuns.com/notes/pics/201708/28/152427alkrlnhtkkghjjeu.jpg",
                "http://cdn.attach.qdfuns.com/notes/pics/201708/28/152247c00jnfwzfjqakjrj.jpg",
                "http://cdn.attach.qdfuns.com/notes/pics/201708/28/152247nm4jbbkbbklg4blp.jpg",
                "http://cdn.attach.qdfuns.com/notes/pics/201708/28/152247etznl2kk9nnk1i2n.jpg"
                ]   
            }
        },
        methods:{
            bigImg(index){
                this.showBigImg = true;
                this.num = index;
            },
            prev(){
                if(this.num==0){
                    this.num =6
                }
                this.num--;
                console.log(this.num)
            },
            next(){
                if(this.num==5){
                    this.num=-1;
                }
                this.num++;
            }
        }
    })