在Vue中，有時我們需要使用無限滾動來顯示大量數據，利用Vue的數據綁定和計算屬性，我們可以實現簡單而高效的數據滾動。

首先，在data中定義數據，我們可以在一個字符串數組中定義所有的數據。假設數據源已經提前準備好，我們可以使用slice方法在每次頁面滾動時加載更多數據。

data() {
return {
items: [
'item0',
'item1',
'item2',
...
'item99'
]
}
},
computed: {
slicedItems() {
return this.items.slice(0, this.itemsToShow)
},
itemsToShow() {
return Math.min(this.items.length, this.visibleItems)
},
visibleItems() {
return Math.ceil(this.height / this.itemHeight)
},
height() {
return window.innerHeight
},
itemHeight() {
return 45
}
}

上述代碼中，定義了一個字符串數組items，computed屬性slicedItems是對items數組進行了截取的結果，這里默認只顯示了window.innerHeight/itemHeight個item，可以根據實際情況進行修改，visibleItems表示可見items的數量，height為視口高度，itemHeight為每個item的高度。

接著，我們可以使用v-scroll指令處理滾動事件，每次滾動都會觸發loadMore方法，更新itemsToShow值，從而加載更多數據。這里需要注意，需要將v-scroll指令放置在容器元素上，以便正確地捕捉滾動事件。

{{ item }}

loadMore方法的實現如下：

methods: {
loadMore() {
const scrollTop = window.scrollY
const scrollHeight = document.body.scrollHeight
const windowHeight = window.innerHeight
if (scrollTop + windowHeight >= scrollHeight - 100) {
this.itemsToShow += Math.min(this.visibleItems, this.items.length - this.itemsToShow)
}
}
}

上述代碼中，判斷是否觸底的方法是將scrollTop和windowHeight相加，再加上100，是為了預留一定的滾動空間，防止用戶滾到底部時還沒有觸發加載更多。每次加載更多相當于增加了itemsToShow的值，由于computed屬性slicedItems依賴于itemsToShow，因此會自動更新渲染數據。