一些網(wǎng)站有一個主導(dǎo)航欄，其中的某些選項總是處于激活狀態(tài)。這時，一個好的互動設(shè)計是，讓用戶點擊導(dǎo)航欄項目之后，其顏色會變得更加明顯，好讓用戶知道自己在哪個類別下。Vue.js 能讓這樣的任務(wù)變得很簡單，下面我們來介紹。

在 Vue.js 中，綁定一個事件非常簡單。我們可以使用v-on:或縮寫的@來綁定事件。為了綁定點擊事件，我們使用v-on:click。以下是一個示例，以便更好地解釋它是如何工作的：

new Vue({
el: '#app',
data: {
active: false
},
methods: {
activate() {
this.active = true;
}
}
});

這是我們要綁定點擊事件的 HTML：

<div id="app">
<div 
v-on:click="activate"
v-bind:class="{ active: active }"
>
點我
</div>
</div>

在這個示例中，我們使用了v-bind:class指令。這個指令可以讓我們動態(tài)地綁定一個類。在這里，我們使用了對象語法來綁定一個單一的類active。這個類名將會在數(shù)據(jù)中的active變量為真時被添加到元素上。

最后，我們需要創(chuàng)建一個activate()方法。這個方法被綁定到v-on:click事件上。在這個方法中，我們僅僅將數(shù)據(jù)中的active變量設(shè)置為真。

這是如何實現(xiàn)一個點擊欄目變色的最簡單的方法。如果你要在自己的應(yīng)用中使用這個功能，你可能要更進(jìn)一步地增加代碼，但基礎(chǔ)知識已經(jīng)講解完成了。現(xiàn)在，你可以開始在 Vue.js 應(yīng)用中實現(xiàn)一個自動變色的導(dǎo)航欄了！