求助，点击每个li的时候会出现下拉列表并且这个的css样式会改变。用vue怎么才能实现？

Question

<template>
  <div class="navigation">
    <div class="logo_image"></div>

    <div class="control_center">控制中心</div>
    <div class="navigation_list">
      <div
        v-on:click="click()"
        @mouseenter="enter(index)"
        @mouseleave="leave()"
        class="homePage"
      >
        首页

      </div>
        <div
            class="technology"
        >
            技术能力
        </div>
        <div
            class="solution"
        >
            解决方案
        </div>
      <div
        class="about"
      >
        关于我们
      </div>
      <div
        class="join"
      >
        加入我们
      </div>
    </div>

  </div>
</template>

<script>

  export default {
    data() {
      return {

      }
    },
    methods: {
      click() {
        console.log('我的世界里');
        document.getElementsByClassName('show_page')[0].style.display = 'block'
      },

    }
  }

</script>

Answer 1

题主，你的li在哪，是点击首页这个tab出现一个子级下拉菜单列表吗

<template>
  <div class="navigation">
    <div class="logo_image"></div>

    <div class="control_center">控制中心</div>
    <div class="navigation_list">
      <div v-for="meunItem in menus" 
        v-text="menuItem.text"
        :key="menuItem.cls"
        :click="click(meunItem)"
        @mouseenter="enter(index)"
        @mouseleave="leave()"
        :class="menuItem.cls"
      >
          <ul v-show="menuItem.active">
              <li v-for="subItem in menuItem.subMenus" 
                  :key="subItem.id"
                  v-text="subItem.name">
              </li>
          </ul> 
      </div> 
    </div>

  </div>
</template>

<script>

  export default {
    data() {
      return {
          menus: [
              { active: false, cls: 'homePage', text: '首页', subMenus: [{id: 0, name:'我是子菜单'}]},
              { active: false, cls: 'technology', text: '技术能力', subMenus: [{id: 0, name:'我是子菜单'}]},
              { active: false, cls: 'solution', text: '解决方案', subMenus: [{id: 0, name:'我是子菜单'}]},
              { active: false, cls: 'about', text: '关于我们', subMenus: [{id: 0, name:'我是子菜单'}]},
              { active: false, cls: 'join', text: '加入我们', subMenus: [{id: 0, name:'我是子菜单'}]}
          ]
      }
    },
    methods: {
      click(item) {
          //其他tab页的子菜单隐藏
        this.menus = this.menus.map(menu => {
            menu.active = false
        })
        //显示当前点击的tab页的子菜单
        item.active = true
      },

    }
  }

</script>

哇，这个有点累。。。

Answer 2

data里面声明一个变量variable 布尔型，点击li的话就对这个变量进行取反，
在li上通过class进行样式绑定，:class="{'className' : variable}" 通过variable的true or false 进行class切换

Answer 3

给你一个思路。

把你的tabs 定义从一个数组 在data中, 定义一个当前选中的tab

tabs: [{name: '首页'},{name: '首页'},{name: '首页'}],
activeTab: 0

然后

<div v-for = (tab, index) in tabs  @click = changeCss(index) :class="{activeTab: activeTab === index}">{{tab.name}}</div>

在methods中

changeCss() {
    this.activeTab = index
}

然后绑定的css
.activeTab {
color: map-get($fontColors, FC333);
font-weight: 600;
}