下面我們來(lái)介紹一下layui菜單渲染使用Vue的方法，首先需要引入layui和Vue的相關(guān)庫(kù)，例如：

<!-- 引入layui庫(kù) -->
<link rel="stylesheet" href="layui/css/layui.css">
<script src="layui/layui.js"></script>
<!-- 引入Vue庫(kù) -->
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>

layui的菜單渲染需要依賴tree模塊，我們可以使用npm來(lái)安裝tree模塊：

npm install layui-tree

接下來(lái)，我們需要在Vue的實(shí)例中引入tree模塊：

Vue.use(tree);

下一步是在Vue的組件中定義菜單的數(shù)據(jù)源，例如

//定義菜單數(shù)據(jù)源
var menuData = [
{
"name": "首頁(yè)",
"url": "index.html"
},
{
"name": "管理中心",
"children": [
{
"name": "用戶管理",
"url": "user.html"
},
{
"name": "角色管理",
"url": "role.html"
}
]
},
{
"name": "系統(tǒng)設(shè)置",
"url": "sys.html"
}
];

接下來(lái)，我們需要在Vue組件中渲染我們的菜單：

//定義組件
Vue.component('my-menu', {
data:function(){
return {
menuData:menuData,
showMenu:false
}
},
template: '<div><button class="layui-btn" @click="showMenu=!showMenu">顯示菜單</button>' +
'<div v-show="showMenu" class="layui-collapse" lay-accordion>'+
'<my-menu-item v-for="item in menuData" :item="item"></my-menu-item>'+
'</div></div>'
});
//定義子組件
Vue.component('my-menu-item', {
props:['item'],
template: '<div><div :class="\'layui-colla-item \' + (item.children?\'\':\'layui-colla-item-noborder\')">'+
'<h2 class="layui-colla-title" @click="toggleCollapse">{{item.name}}</h2>' +
'<div v-if="item.children" class="layui-colla-content">'+
'<my-menu-item v-for="child in item.children" :item="child"></my-menu-item>'+
'</div></div>',
methods:{
toggleCollapse:function(e){
var target=e.target;
$(target).parent().toggleClass("layui-colla-item-expanded");
}
}
});

最后，我們?cè)趆tml中使用my-menu組件來(lái)渲染菜單：

<div id="app">
<my-menu></my-menu>
</div>
<script>
new Vue({
el:'#app'
});
</script>

至此，我們完成了vue與layui菜單的渲染，可以在頁(yè)面中使用該組件渲染我們的菜單。