在Web開發中，經常需要添加一個菜單欄，當用戶點擊某一個菜單項時，該項的樣式需要改變以表示當前選中的狀態。在Vue框架中，這種交互式的效果可以很容易地實現。

首先，我們需要在Vue實例中定義一個data屬性，用于存儲當前選中菜單項的索引。在這個例子中，我們將當前菜單項的索引值存儲在selected變量中。

data: {
selected: -1,
menuItems: [
{ label: '首頁', url: '#' },
{ label: '新聞', url: '#' },
{ label: '產品', url: '#' },
{ label: '關于我們', url: '#' }
]
}

然后，我們需要在模板中渲染出菜單項列表，并將每個菜單項綁定一個點擊事件。在點擊事件中，我們將selected變量更新為當前菜單項的索引。

{{ item.label }}

在這段代碼中，我們使用了v-for指令來遍歷menuItems數組，然后渲染出每個菜單項。我們通過:class綁定了一個active樣式類，只有當當前菜單項的索引等于selected變量的值時，才會添加此類。這樣就實現了選中某個菜單項后該項變色的效果。

這里的@click指令是一個Vue提供的簡寫方式，等價于v-on:click。當用戶點擊某個菜單項時，該事件會調用selected變量的setter方法，并將其值更新為當前菜單項的索引。

最后，我們在樣式表中為.active類添加一個背景色。這樣，每次用戶點擊某個菜單項時，該項的背景色就會改變以體現選中狀態。

ul li.active {
background-color: #ccc;
}

通過上述方法，我們就可以輕松地實現Vue中的點擊菜單變色效果。這種交互式的效果不僅能夠提高用戶體驗，更能提高網站的交互性和可用性。