Vue是一個流行的JavaScript框架，它的指令和組件使得開發交互性界面變得更加簡單和直觀。在Vue中，我們可以輕易地實現菜單的展開和收縮效果。

在許多的單頁應用程序（SPA）中，菜單收縮是一個常見的設計需求。當屏幕空間較小的時候，可以向用戶展示一個壓縮和簡潔的菜單。點擊菜單按鈕后，菜單會展開，顯示更多的選項操作。

通過在Vue實例中使用v-show指令和CSS樣式，我們可以實現菜單收縮的效果。下面是一個簡單的示例代碼：

<template>
<div class="menu">
<button @click="showMenu = !showMenu">菜單</button>
<ul v-show="showMenu">
<li>選項1</li>
<li>選項2</li>
<li>選項3</li>
<li>選項4</li>
</ul>
</div>
</template>
<script>
export default {
data() {
return {
showMenu: false
};
}
};
</script>
<style>
.menu ul {
display: none;
}
.menu ul.show {
display: block;
}
</style>

在上面的代碼中，我們首先定義了一個按鈕和一個ul元素。ul元素包含了菜單的選項。我們使用了v-show指令將ul元素默認隱藏。當用戶點擊按鈕時，showMenu屬性會切換其值。并且，當showMenu屬性值為true時，ul元素的CSS樣式會將其展示出來。

通過使用上述簡單的Vue代碼，我們可以實現一種簡潔而富有交互性的菜單收縮效果。