當(dāng)我們開發(fā)網(wǎng)頁(yè)時(shí)，我們經(jīng)常需要將一些數(shù)據(jù)以列表的形式展示出來。這時(shí)候，我們就需要考慮如何實(shí)現(xiàn)選中某一項(xiàng)的功能。在Vue中，我們可以通過v-model指令和computed計(jì)算屬性來控制列表的選中狀態(tài)。具體實(shí)現(xiàn)步驟如下：

<div id="app">
<ul>
<li v-for="(item, index) in list"
:key="index"
:class="{'active': activeIndex === index}"
v-on:click="() => { activeIndex = index }">
{{ item }}
</li>
</ul>
</div>
<script>
var app = new Vue({
el: '#app',
data: {
list: ['apple', 'banana', 'orange'],
activeIndex: -1
},
computed: {
activeItem: function() {
if(this.activeIndex !== -1) {
return this.list[this.activeIndex]
}
return null
}
}
})
</script>

首先，在HTML中，我們使用v-for指令遍歷列表，并使用:class動(dòng)態(tài)綁定class屬性，當(dāng)activeIndex等于當(dāng)前索引時(shí)，為該列表項(xiàng)添加active類。同時(shí)使用v-on指令綁定click事件，將activeIndex賦值為當(dāng)前索引。

在Vue實(shí)例中，我們定義了數(shù)據(jù)list和activeIndex。其中，activeIndex的初始值為-1，表示沒有任何列表項(xiàng)被選中。使用computed計(jì)算屬性activeItem來獲取當(dāng)前選中的列表項(xiàng)。當(dāng)activeIndex不等于-1時(shí)，返回當(dāng)前選中的列表項(xiàng)。否則，返回null。

通過這種方式，我們可以控制列表的選中狀態(tài)，根據(jù)activeIndex的值來動(dòng)態(tài)綁定class屬性，展示被選中的效果。計(jì)算屬性activeItem可以在需要獲取選中列表項(xiàng)的地方使用，方便實(shí)現(xiàn)其他功能，比如刪除選中項(xiàng)等等。

需要注意的是，當(dāng)列表數(shù)據(jù)為動(dòng)態(tài)獲取時(shí)，我們需要保證activeIndex的值不會(huì)越界或者不存在。具體實(shí)現(xiàn)方式可以根據(jù)具體場(chǎng)景來定。

綜上所述，通過Vue的v-model指令和computed計(jì)算屬性，我們可以很方便地控制列表的選中狀態(tài)，實(shí)現(xiàn)各種相關(guān)功能。如果在實(shí)際開發(fā)中遇到問題，可以參考Vue官方文檔中的相關(guān)內(nèi)容，或者在社區(qū)尋求幫助。