Vue的li active類是一個(gè)非常常用的功能，它允許你高亮顯示當(dāng)前選中的列表項(xiàng)。在Vue中，我們可以使用v-bind:class指令和計(jì)算屬性來實(shí)現(xiàn)這個(gè)功能。

首先，我們需要為每個(gè)列表項(xiàng)綁定一個(gè)類名，用于表示選中狀態(tài)。通常情況下，我們可以使用一個(gè)布爾值來判斷當(dāng)前項(xiàng)是否被選中：

<ul>
<li v-for="(item, index) in list" :key="index" :class="{ active: selectedIndex === index }">
{{ item }}
</li>
</ul>

在上面的代碼中，我們使用selectedIndex存儲(chǔ)當(dāng)前選中項(xiàng)的索引，然后通過v-for循環(huán)生成每個(gè)列表項(xiàng)，并給它們綁定一個(gè)active類，用于表示選中狀態(tài)。當(dāng)selectedIndex等于當(dāng)前項(xiàng)的索引時(shí)，這個(gè)類就會(huì)被添加，否則就會(huì)被移除。

接下來，我們需要定義一個(gè)計(jì)算屬性來動(dòng)態(tài)計(jì)算selectedIndex的值：

<script>
export default {
data () {
return {
list: ['Apple', 'Banana', 'Orange'],
selected: 'Apple'
}
},
computed: {
selectedIndex () {
return this.list.indexOf(this.selected)
}
}
}
</script>

在上面的代碼中，我們定義了一個(gè)selected變量來存儲(chǔ)當(dāng)前選中項(xiàng)的值，在computed屬性中，我們通過indexOf方法從列表中查找這個(gè)值，并返回它的索引。這樣，我們就可以根據(jù)選中項(xiàng)的值來動(dòng)態(tài)計(jì)算選中項(xiàng)的索引了。

總之，Vue的li active功能是非常實(shí)用的，它可以讓用戶更容易地識(shí)別當(dāng)前選中的項(xiàng)。通過使用v-bind:class指令和計(jì)算屬性，我們可以在Vue中輕松地實(shí)現(xiàn)這個(gè)功能。希望本文對(duì)你有所幫助！