修改部分变量名

src/components/ThreeMenu.vue

 <template>
   <div class="menu">
-    <div class="cover" :class="[filter.selected!==''?'':'invisible']"></div>
+    <div class="cover" :class="[filter.selected!=''?'':'invisible']"></div>
     <div class="filter fixed">
       <!-- 一级菜单开始 -->
       <div class="fmenu">
-        <div :class="{cf:true, active:cfName !=='吃饭'}" class="flex">
-          <div class="sn" :class="[filter.selected==='cf'?'open':'close']" @click="switchFilter" data-name="cf">{{cfName}}</div>
+
+        <div :class="{eat:true, active:eatName !='吃饭'}" class="flex">
+          <div class="sn" :class="[filter.selected=='eat'?'open':'close']" @click="switchFilter" data-name="eat">{{eatName}}</div>
         </div>
-        <div :class="{sj:true,active:sjName !=='睡觉'}" class="flex">
-          <div class="sn" :class="[filter.selected==='sj'?'open':'close']" @click="switchFilter" data-name="sj">{{sjName}}</div>
+
+        <div :class="{sleep:true,active:sleepName !='睡觉'}" class="flex">
+          <div class="sn" :class="[filter.selected=='sleep'?'open':'close']" @click="switchFilter" data-name="sleep">{{sleepName}}</div>
         </div>
-        <div :class="{dd:true,active:ddName !=='打豆豆'}" class="flex">
-          <div class="sn" :class="[filter.selected==='dd'?'open':'close']" @click="switchFilter" data-name="dd">{{ddName}}</div>
+
+        <div :class="{hit:true,active:hitName !='打豆豆'}" class="flex">
+          <div class="sn" :class="[filter.selected=='hit'?'open':'close']" @click="switchFilter" data-name="hit">{{hitName}}</div>
         </div>
+
       </div>
       <!-- 一级菜单结束 -->
       <!-- 二级菜单开始 -->
-      <div class="fkind" :class="[filter.selected===''?'invisible':'']">
-        <div :class="[filter.selected==='cf'?'':'invisible']" class="item-cf">
+      <div class="fkind" :class="[filter.selected==''?'invisible':'']">
+        <!--第一个一级选项-->
+        <div :class="[filter.selected=='eat'?'':'invisible']" class="item-eat">
+
           <div class="tabs">
-            <div :class="{zc:true,on:filter.secondTab==='zc'}" data-name='zc' @click="secondTab" >中餐</div>
-            <div :class="{xc:true,on:filter.secondTab==='xc'}" data-name='xc' @click="secondTab" >西餐</div>
+            <div :class="{china:true,on:filter.secondTab=='china'}" data-name='china' @click="secondTab" >中餐</div>
+            <div :class="{west:true,on:filter.secondTab=='west'}" data-name='west' @click="secondTab" >西餐</div>
           </div>
-          <div class="tab-zc" :class="[filter.secondTab==='zc'?'xs':'yc']" v-if="filter.secondTab==='zc'">
+          <!--第一个三级菜单开始-->
+          <div class="tab-china" :class="[filter.secondTab=='china'?'seen':'none']" v-if="filter.secondTab=='china'">
             <div class="left" >
-              <div :data-text="item.name" :data-id="item.id" :class="{active:item.id===filter.threeTabId}" @click="threeTab" v-for="(item,index) in zcs " :key="index">{{item.name}}</div>
+              <div :data-text="item.name" :data-id="item.id" :class="{active:item.id==filter.threeTabId}" @click="threeTab" v-for="(item,index) in chinas " :key="index">{{item.name}}</div>
+            </div>
+            <div class="right" v-for="(item,index) in chinafood" v-if="item.id==filter.threeTabId" :key="index" >
+              <div class="food" v-for="(t,i) in item.name" :key="i" @click="dosomething" >
+                {{t}}
+              </div>
+            </div>
+          </div>
+          <!--第二个三级菜单开始-->
+          <div class="tab-west" :class="[filter.selected=='west'?'seen':'none']" v-if="filter.secondTab=='west'">
+            <div class="left">
+              <div :data-text="item.name" :data-id="item.id" :class="{active:item.id==filter.threeTabId}" @click="threeTab" v-for="(item,index) in westc " :key="index">{{item.name}}</div>
             </div>
-            <div class="right" v-for="(item,index) in zcm" v-if="item.id===filter.threeTabId" :key="index" >
-              <div class="cm" v-for="(t,i) in item.name" :key="i" @click="dosomething" >
+            <div class="right" v-for="(item,index) in westfood" v-if="item.id==filter.threeTabId" :key="index">
+              <div class="food" v-for="(t,i) in item.name" :key="i" @click="dosomething">
                 {{t}}
               </div>
             </div>
           </div>
+
         </div>
+        <!--第一个一级选项结束-->
       </div>
+<!--      二级菜单结束-->
     </div>
   </div>
 </template>
 
 <script>
 export default {
-  name: "TreeMenu",
+  name: 'ThreeMenu',
   data () {
     return {
       filter: {
         selected: '', // 一级模块;
-        secondTab: 'zc', // 现有默认;
+        secondTab: 'china', // 现有默认;
         threeTabId: ''
       },
-      zcs: [
+      chinas: [
         {
           id: 1,
           name: '河南'
@@ -62,8 +83,20 @@ export default {
           name: '河北'
         }
       ],
-      xcg: ['美国', '英国', '加拿大'],
-      zcm: [
+      westc: [
+        {
+          id: 1,
+          name: '美国'
+        },
+        {
+          id: 2,
+          name: '英国'
+        },
+        {
+          id: 3,
+          name: '意大利'
+        }],
+      chinafood: [
         {
           id: 1,
           name: ['馒头', '烩面', '胡辣汤']
@@ -76,17 +109,31 @@ export default {
           id: 3,
           name: ['驴肉火烧', '酱汁瓦块鱼', '大饼']
         }
+      ],
+      westfood: [
+        {
+          id: 1,
+          name: ['汉堡','薯条']
+        },
+        {
+          id: 2,
+          name: ['nothing']
+        },
+        {
+          id: 3,
+          name: ['意大利面']
+        }
       ]
     }
   },
   computed: {
-    cfName () {
+    eatName () {
       return '吃饭'
     },
-    sjName () {
+    sleepName () {
       return '睡觉'
     },
-    ddName () {
+    hitName () {
       return '打豆豆'
     }
   },
@@ -117,48 +164,59 @@ export default {
 }
 </script>
 
+<!-- Add "scoped" attribute to limit CSS to this component only -->
 <style lang="less" scoped>
-                  .filter{
-.fmenu{
-  display: flex;
-  text-align: center;
-}
-.flex{
-  flex: 1;
-};
-.sn.open{
-  background-color: pink;
-}
-.invisible{
-  display: none;
-}
-.fkind{
-  padding-top: 1.333333rem;
-}
-.tabs{
-  display: flex;
-.on{
-  background-color: green;
-};
-div{
-  flex:1;
-  text-align: center;
-};
+.filter{
+  .fmenu{
+    display: flex;
+    text-align: center;
+  }
+  .flex{
+    flex: 1;
+  };
+  .sn.open{
+    background-color: pink;
+  }
+  .invisible{
+    display: none;
+  }
+  .fkind{
+    padding-top: 1.333333rem;
+  }
+  .tabs{
+    display: flex;
+    .on{
+      background-color: green;
+    };
+    div{
+      flex:1;
+      text-align: center;
+    };
 
-}
-.tab-zc{
-  padding-top: 1.333333rem;
-  display: flex;
-.left{
-  flex:1;
-};
-.right{
-  flex: 1;
-}
-}
-.active{
-  background-color: pink;
-}
+  }
+  .tab-china{
+    padding-top: 1.333333rem;
+    display: flex;
+    .left{
+      flex:1;
+    };
+    .right{
+      flex: 1;
+    }
+  }
+  .tab-west{
+    padding-top: 1.333333rem;
+    display: flex;
+    .left{
+      flex:1;
+    };
+    .right{
+      flex: 1;
+    }
+  }
+  .active{
+    background-color: pink;
+  }
 }
 .cover{
   background-color: rgba(0,0,0,.2);
@@ -168,9 +226,9 @@ div{
   left: 0;
   top: 0;
   z-index: 4;
-&.invisible {
-   display: none;
- }
+  &.invisible {
+    display: none;
+  }
 }
 .fixed{
   background-color: #fff;
@@ -179,4 +237,4 @@ div{
   top: 0;
   z-index: 9999;
 }
-</style>
\ No newline at end of file
+</style>