Vue实现左右菜单联动实现

---

title: Vue实现左右菜单联动实现
date: 2018-08-11 16:31:34
tags:

• Vue
• 左右联动
  top: 100
  copyright: true

---

Github - program-learning-lists

知乎

个人博客

Github

源码传送门：Rain120/vue-study

根据掘金评论需求，更新了数据接口并修复了一些问题

之前在外卖软件上看到这个左右联动的效果，觉得很有意思，所以就尝试使用Vue来实现，将这个联动抽离成为一个单独的组件，废话少说，先来一张效果图。

这个组件分为两个部分，1、左菜单；2、右菜单。

动态数据结构

menus: [
  {
    name: '菜单1',
    data: [
      {
        name: '1.1'
      },
      {
        name: '1.2'
      },
      {
        name: '1.3'