Vue是一個流行的JavaScript框架，可以幫助開發人員構建高效且易于維護的Web應用程序。其中，菜單聯動是Vue應用程序中常見的一種功能，它可以讓用戶在不同的菜單選項中進行切換，以展示不同的頁面或信息。

下面是一個基本的菜單聯動的實現示例：

<template>
<div>
<ul>
<li v-for="(item, index) in menuOptions" :key="index" :class="{active: item.isActive}" @click="toggleActive(item)">{{ item.name }}</li>
</ul>
<div v-if="selectedOption">
<h2>{{ selectedOption.name }}</h2>
<p>{{ selectedOption.description }}</p>
</div>
</div>
</template>
<script>
export default {
data() {
return {
menuOptions: [
{ name: "Option 1", description: "Description of option 1" },
{ name: "Option 2", description: "Description of option 2" },
{ name: "Option 3", description: "Description of option 3" }
],
selectedOption: null
};
},
methods: {
toggleActive(option) {
this.menuOptions.forEach(item => {
item.isActive = false;
});
option.isActive = true;
this.selectedOption = option;
}
}
};
</script>

在這個示例中，我們首先定義了一個menuOptions數組，其中包含了三個菜單選項，并且還定義了一個selectedOption變量，用于存儲用戶選擇的選項。在HTML模板部分，我們使用了Vue的v-for指令來循環渲染菜單選項，使用v-bind指令來綁定isActive屬性，以實現選中樣式的切換。我們還通過v-if指令來控制頁面右側的內容是否展示。

在JavaScript部分，我們定義了toggleActive方法，該方法會在用戶點擊菜單選項時觸發，它會先將所有其他選項的isActive屬性設置為false，然后將用戶選擇的選項的isActive屬性設置為true，并且將該選項賦值給selectedOption變量。

總體來說，Vue的菜單聯動非常簡單且易于實現，通過對isActive屬性的綁定和toggleActive方法的編寫，我們可以快速實現一個功能完善的菜單聯動組件。