11.Vue图片切换

定义图片阵列-图片数组imgArr添加图片索引-index绑定src属性-v-bind图片切换 v-on 逻辑-v-show显示状态切换

<div id="image"><img v-bind:src="imgArr[index]" class="change"alt="" > <!-- 绑定图片阵列--><a href="#" @click="pre" v-show="index!=0"><img src="img\left-arrow-glyph-black-icon-png_293054 .jpg" alt="" class="right"></a><!--  往前的按钮， 当图片不是第一张时都可以使用 --><a href="#" @click="next" v-show="index<imgArr.length-1"><img src="img\right-arrow-glyph-black-icon-png_293054.jpg" alt="" class="left"></a><!-- 往后的按钮 ， 当图片不是最后一张时都可以使用--></div><script>   var image=new Vue({        el:"#image",        data:{          imgArr:[  //图片阵列            "./img/S__50724867.jpg",            "./img/S__50724869.jpg",            "./img/S__50724870.jpg",            "./img/S__50724871.jpg",            "./img/S__50724872.jpg",            "./img/S__50724873.jpg",            "./img/S__50724874.jpg"          ],          index:0,        },        methods:{          pre(){   //显示前一张影像            this.index--;          },          next(){            this.index++;  //显示后一张影像          }        }      })</script>

参考:
https://www.bilibili.com/video/BV1HE411e7vY/?p=14&share_source=copy_web&vd_source=85a8c5bb37dc77d30860d2b3537de967