在Vue中，數組循環是經常用到的功能。Vue提供了v-for指令來實現數組循環，它可以用于循環對象和數組，并且可以搭配計算屬性和方法使用。

// 示例數組
data() {
return {
fruits: ['apple', 'banana', 'orange']
}
}
// 在模板中使用v-for指令循環數組
{{ fruit }}

在這個例子中，我們使用了v-for指令循環了fruits數組，其中“fruit”代表了當前遍歷到的數組元素，而“index”則代表了當前元素的下標。我們還在li標簽上使用了:key屬性，這是Vue要求我們在組件或者循環中必須綁定的key值，它能夠幫助Vue更快的監測數組的變化。

我們還可以在v-for指令后跟隨一個計算屬性，它可以用于過濾或者排序數組，以達到我們更精細化的循環需求。

// 示例計算屬性
data() {
return {
unfilteredFruits: ['apple', 'banana', 'orange']
}
},
computed: {
fruits() {
return this.unfilteredFruits.filter(fruit =>{
return fruit !== 'orange';
});
}
}
// 在模板中使用v-for指令與計算屬性
{{ fruit }}

在這個例子中，我們引入了一個計算屬性“fruits”，它通過過濾unfilteredFruits數組中的元素來過濾出新的數組。我們在模板中仍然使用v-for指令循環數組，來展示我們過濾后的數組。

最后，我們還可以在模板中使用v-for指令循環對象，它可以讓我們更加靈活的渲染對象的屬性。

// 示例對象
data() {
return {
person: {
name: 'Alice',
age: 20,
gender: 'female'
}
}
}
// 在模板中使用v-for指令循環對象
{{ key }}: {{ value }}

在這個例子中，我們使用了v-for指令循環了一個對象“person”，其中“value”代表了當前對象屬性的值，“key”則代表了當前屬性的鍵。我們在li標簽中使用了類似于插值表達式的語法，以展示我們循環出來的對象屬性。