本来还有个v-bind指令没写笔记，懒得写了，至于怎么用，就一并在这里记录吧。
首先我们这次想要实现的是图片的切换，有两个按钮，可以向左和向右切换图片。第一张图片由于其左边没有图片了，因此此时的左按钮应隐藏，同理当处于最后一张图片时应隐藏右按钮。
实现逻辑比较简单，但是我们一共要用到好几个v指令。例如上面按钮的隐藏需要用到v-show指令；操作图片要用到v-bind指令，所以这个指令是用来操作元素属性的；然后还有点击事件等等。在这次的代码中我们全部采用简写方式。
首先，图片，我们怎么实现图片的来回切换呢？使用数组呗！我们搞一个数组专门来存储这些图片就好了。这时，自然还需要一个index来表示数组的索引，点击左右按钮实际改变的就是这个index值。
好了，现在开工！
对于图片显示的html结构，我们就先写一个大的div块，然后在这个div块里面先是向前翻的图标，然后是图片，最后是向后翻的图标。
那么首先，我们自然要在data里面，定义两个变量，分别是数组imgArr和索引index.数组我们就把所有需要用到的图片保存到我们的项目文件下，然后把路径名保存到数组里，接着，索引的初始值我们定为0.然后我们写两个函数，分别是prev函数和next函数，分别表示向前翻和向后翻，这两个函数是要绑定到对应的按钮上去的。然后，为了控制在显示第一张和最后一张图片时，对应的按钮要消失不见，我们必须在对应图片上html代码上写上v-show指令。怎么写呢？很简单，第一张图片，只需要写上index!=0就可以了；而最后一张，只需要写上index<imgArr.length-1就行了。(至于为什么是减一，自己试试就知道了)
在中间显示图片的img标签下，src我们需要给定imgArr数组的值，中间是啥呢？index.这个，就是v-bind指令的应用，操作属性。
这样一来，就大功完成了，最后把完成的两个函数绑定到对应位置处就OK了。
我的代码长这样：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Title</title> </head> <body> <div id="mask"> <div id="center"> <a href="javascript:void(0)" v-show="index!=0" @click="prev" class="left"> <img src="prev.png" alt=""> </a> <img :src="imgArr[index]" alt=""> <a href="javascript:void(0)" v-show="index<imgArr.length-1" @click="next" class="right"> <img src="next.png" alt=""> </a> </div> </div> <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script> <script> var app = new Vue({ el:"#mask", data:{ imgArr:[ "盖亚太帅了！.png", "看这一脚踢的！.png", "有阴谋！.png", "打赢了！.png", "被打懵了.png", "啊！.png", "我倒了.png", "盖亚！.png", "坏了，盖亚被怪兽钳住了.png", "阿古菇，你要连我一块儿消灭吗！？.png", "戴拿和哥尔赞这深情的对视.png", "戴拿：我把你当兄弟，你居然牵我小手手？.png", ], index:0 }, methods:{ prev:function () { --this.index; }, next:function () { ++this.index; } } }) </script> </body> </html>
随便放两张看看效果吧：
最后再补充一点：盖亚奥特曼真TM帅！不接受反驳。