Vue.js 是目前 Web 前端開發中極為流行的框架之一，其具有簡單易用、輕量快捷的特點，能夠幫助開發者快速搭建起應用程序的前端框架。

Vue 菜單折疊是 Vue.js 項目中非常常見的組件之一，通過使用 Vue 的雙向數據綁定和組件化的優勢，我們能夠很方便地實現一個可以折疊的菜單。

<template>
<div class="menu-container">
<div class="menu" 
:class="{'menu-active': isActive}" 
@click="isActive = !isActive">
<i class="iconfont icon-menu"></i>
<span class="text">{{ title }}</span>
</div>
<div class="menu-list" v-show="isActive">
<ul>
<li v-for="item in list" :key="item.id">
<a :href="item.link">{{ item.text }}</a>
</li>
</ul>
</div>
</div>
</template>
<script>
export default {
name: 'Menu',
props: {
title: {
type: String,
default: 'Menu'
},
list: {
type: Array,
default() {
return []
}
}
},
data() {
return {
isActive: false
}
}
}
</script>

上述代碼是一個簡單的 Vue 菜單折疊組件示例，我們要點分析，包括了以下幾個部分：

• template部分：使用了 Vue 的模板語法，實現了一個菜單折疊的基本結構，同時通過 v-show 指令判斷 isActive 屬性，控制菜單的顯示和隱藏。
• script部分：定義了一個名為 Menu 的組件，通過 props 屬性，從父組件接收 title 和 list 數據。isActive 屬性用于控制菜單折疊的狀態，初始化時為 false。在菜單被點擊時，通過 isActive = !isActive 實現狀態的切換。

通過上述示例，我們可以看出，Vue 菜單折疊組件是非常簡單、易用的，能夠幫助我們輕松地實現一個具有折疊功能的菜單。