Vue是一個流行的JavaScript框架，它可以方便地處理列表數據。本文將介紹如何通過Vue實現圖片遍歷的功能。

首先，我們需要在HTML中定義一個用于顯示圖片的容器。

接著，在Vue的實例中定義一個列表數據和一個指向當前圖片的索引。

new Vue({
el: '#app',
data: {
images: [
'https://example.com/image1.jpg',
'https://example.com/image2.jpg',
'https://example.com/image3.jpg'
],
currentIndex: 0
}
})

為了使用戶可以通過點擊上一張或下一張按鈕來遍歷圖片，我們需要分別編寫向前和向后的方法，并在按鈕上綁定這些方法。

methods: {
prevImage: function () {
this.currentIndex--
if (this.currentIndex< 0) {
this.currentIndex = this.images.length - 1
}
},
nextImage: function () {
this.currentIndex++
if (this.currentIndex == this.images.length) {
this.currentIndex = 0
}
}
}

上一張下一張

現在，每當用戶點擊這些按鈕時，當前索引都會發生變化。我們需要使用computed屬性來獲取當前索引對應的圖片鏈接。

computed: {
currentImg: function () {
return this.images[this.currentIndex]
}
}

至此，我們已經成功實現了圖片遍歷的功能。完整代碼如下：

上一張下一張
new Vue({
el: '#app',
data: {
images: [
'https://example.com/image1.jpg',
'https://example.com/image2.jpg',
'https://example.com/image3.jpg'
],
currentIndex: 0
},
methods: {
prevImage: function () {
this.currentIndex--
if (this.currentIndex< 0) {
this.currentIndex = this.images.length - 1
}
},
nextImage: function () {
this.currentIndex++
if (this.currentIndex == this.images.length) {
this.currentIndex = 0
}
}
},
computed: {
currentImg: function () {
return this.images[this.currentIndex]
}
}
})