Vue是一個非常流行的前端框架，它讓我們能夠很方便地構(gòu)建單頁面應(yīng)用程序。在Vue中，一個常見的場景是需要展現(xiàn)列表數(shù)據(jù)。如何在Vue中控制列表？

通常，我們可以使用v-for指令來循環(huán)遍歷數(shù)組或?qū)ο螅秩境隽斜眄棥Ｏ旅媸且粋€簡單的例子：

<ul>
<li v-for="item in items" :key="item.id">{{ item.title }}</li>
</ul>
<script>
export default {
data() {
return {
items: [
{id: 1, title: 'item 1'},
{id: 2, title: 'item 2'},
{id: 3, title: 'item 3'}
]
}
}
}
</script>

上面的代碼中，我們使用了v-for指令來循環(huán)渲染出列表項。items數(shù)組中的每個對象都會被渲染為一個li元素。我們也給每個li設(shè)置了一個:key屬性，這個屬性用來幫助Vue識別列表項的唯一性，提高性能。

除了使用v-for指令外，我們還可以利用Vue的計算屬性來對列表進(jìn)行控制。在計算屬性中，我們可以通過對原始數(shù)據(jù)進(jìn)行處理，返回一個新的數(shù)組對象，從而實現(xiàn)對列表的控制。

<ul>
<li v-for="item in activeItems" :key="item.id">{{ item.title }}</li>
</ul>
<script>
export default {
data() {
return {
items: [
{id: 1, title: 'item 1', isActive: true},
{id: 2, title: 'item 2', isActive: false},
{id: 3, title: 'item 3', isActive: true}
]
}
},
computed: {
activeItems() {
return this.items.filter(item => item.isActive)
}
}
}
</script>

上面的代碼中，我們在computed屬性中定義了一個activeItems計算屬性，它返回一個新的數(shù)組，這個數(shù)組中只包含isActive為true的列表項。我們在模板中使用這個計算屬性來渲染列表，從而實現(xiàn)了對列表的控制。

當(dāng)然，在實際開發(fā)中，列表控制的場景還有很多，也許需要根據(jù)用戶的輸入進(jìn)行過濾，或者根據(jù)某個屬性進(jìn)行排序等等。Vue提供了非常豐富的API和指令，讓我們可以很方便地實現(xiàn)這些功能。

總結(jié)來說，Vue中的列表控制可以通過v-for指令和計算屬性來實現(xiàn)。在實際開發(fā)中，可以根據(jù)不同的業(yè)務(wù)需求，選擇不同的方式來控制列表。