本來還有個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帥！不接受反駁。