在實際項目中，經(jīng)常會遇到需要點擊列表項來進行操作的需求，同時還需要將選中的項高亮顯示，這就需要使用Vue提供的v-bind和v-on指令來實現(xiàn)。下面就來詳細介紹一下如何使用Vue來實現(xiàn)點擊列表高亮。

首先，我們需要在Vue實例中定義一個變量來存儲當前選中的項。可以通過data屬性來定義一個selected屬性，然后初始化為null。

new Vue({
el: '#app',
data: {
selected: null,
// 其他數(shù)據(jù)屬性...
},
// 其他選項...
});

接下來，我們需要在模板中渲染出列表，并為每個列表項綁定一個點擊事件處理函數(shù)?？梢酝ㄟ^v-for指令來遍歷數(shù)據(jù)數(shù)組，并使用v-bind指令將數(shù)據(jù)綁定到列表項上。然后使用v-on指令將click事件綁定到列表項上，調(diào)用handleSelect方法來處理點擊事件，并將當前項傳入該方法。

{{ item.name }}

在handleSelect方法中，我們需要將傳入的項賦值給selected屬性，以便后續(xù)使用?？梢酝ㄟ^this關(guān)鍵字來訪問Vue實例中的selected屬性，并將選中的項賦值給它。

new Vue({
el: '#app',
data: {
selected: null,
// 其他數(shù)據(jù)屬性...
},
methods: {
handleSelect(item) {
this.selected = item;
},
// 其他方法...
},
// 其他選項...
});

最后，我們需要在CSS樣式表中定義.active類，用于高亮當前選中的項?？梢詫⑦x中項的顏色設(shè)置為紅色，并設(shè)置字體粗體。

.active {
background-color: #FFCCCC;
}

通過以上步驟，我們就可以實現(xiàn)點擊列表高亮的效果了。當用戶點擊某個列表項時，該項會變成紅色背景，并加粗顯示，同時Vue實例中的selected屬性也會更新為當前選中的項。

如果希望進一步改進效果，可以嘗試添加動畫效果來使切換更流暢。Vue提供了transition和transition-group組件來實現(xiàn)這種效果，可以參考官方文檔進行使用。