vue学习笔记

vue学习

最近因为工作原因需要学习uniapp,但uniapp要掌握vue,所以做起学习笔记
ps:本人是通过b站上的黑马教程学习的,下面是链接
https://www.bilibili.com/video/BV12J411m7MG?p=01

学到了点击按钮切换图片的效果,由此想到是否可以做成轮播图的效果,于是就尝试了一下,虽然很粗糙,但是达到了轮播的效果,下面是代码,有问题请指出,js也不是很擅长…

<div id="mask">
    <div class="center">
      <h2 class="title">
        <img src="./images/logo.png" alt="">
        深圳创维校区环境
      </h2>
      <img :src="imgArr[index]" alt="" />
      <a href="javascript:void(0)" v-show="index!=0" class="left" @click="prev">
          <img src="./images/prev.png" alt="" />
        </a>
      <a href="javascript:void(0)" v-show="index<imgArr.length-1" class="right" @click="next">
        <img src="./images/next.png" alt="" />
      </a>
    </div>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
var mask = new Vue({
        mounted:function(){
            this.lunbo();
        },
        el:"#mask",
        data:{
            imgArr:[
                "./images/00.jpg",
                "./images/01.jpg",
                "./images/02.jpg",
                "./images/03.jpg",
                "./images/04.jpg",
                "./images/05.jpg",
                "./images/06.jpg",
                "./images/07.jpg",
                "./images/08.jpg",
                "./images/09.jpg",
                "./images/10.jpg",
            ],
            index:0,
        },
        methods:{
            prev:function(){
                this.index--;
            },
            next:function(){
                this.index++;
            },
            lunbo:function(){
                setTimeout(() => {
                    this.index++;
                    if(this.index>this.imgArr.length-1){
                        this.index = 0;
                    }
                }, 5000);
                setTimeout(() => {
                    this.lunbo();
                }, 5000);
            }
        }
    })
</script>