鼠标移上出现下拉菜单的用vue要怎么写？

Question

如题，导航要求鼠标移到关于时出现下拉菜单,我的思路如下

我的思路如下，用child控制是否有下拉菜单，用child.show控制下拉菜单显示，问题来了，移上鼠标后如何对应修改child.show？

 <div class="nav-bt">
        <ul class="clearfix father-ul">
          <li v-for="item in navs">
            <router-link :to="item.href" v-text="item.content" >
            </router-link>
            <div class="drop-div" v-if="!!item.child" v-show="item.child.show">
              <span class="trangle"></span>
              <ul class="child-ul">
                <li v-for="item_child in item.child.child_content">
                  <router-link :to="item_child.href">{{item_child.content}}</router-link>
                </li>
              </ul>
            </div>
          </li>
        </ul>
      </div>

data(){
    return{
      navs: [{
            content: '首页',
            href: this.$store.state.page_src.index_src,
            cur: true,
            child: null
          },
          {
            content: '关于',
            href: this.$store.state.page_src.company_src,
            cur: false,
            child: {
              show: false,
              child_content: [{
                content: '1',
                href: this.$store.state.page_src.introduce_src,
              }, {
                content: '2',
                href: this.$store.state.page_src.charge_src,
              }, {
                content: '3',
                href: this.$store.state.page_src.trading_src,
              }, {
                content: '4',
                href: this.$store.state.page_src.contract_src,
              }, {
                content: '5',
                href: this.$store.state.page_src.risk_src,
              }]
            }

          },
          {
            content: '介绍',
            href: this.$store.state.page_src.about_src,
            cur: false,
            child: null
          }
        ]
    }
}

      

Answer 1

用css的:hover去控制样式

Answer 2

建议动态style或class控制显示隐藏

Answer 3

<div class="nav-bt">

    <ul class="clearfix father-ul">
      <li v-for="item in navs">
        <router-link :to="item.href" v-text="item.content" >
        </router-link>
        <div class="drop-div" v-if="!!item.child" v-show="item.child.show">
          <span class="trangle"></span>
          <ul class="child-ul">
            <li v-for="(item_child,index) in item.child.child_content"         
            @click="clickAction(item_child,index)">
              <router-link :to="item_child.href">{{item_child.content}}</router-link>
            </li>
          </ul>
        </div>
      </li>
    </ul>
  </div>
  
  methods:{
  
      clickAction(item,index){
          //这里修改 的逻辑
      }
  }

Answer 4

大概思路是这样，在data里新增个变量showIndex，监听鼠标移入事件，绑定到要鼠标要移入的dom，当鼠标移入到dom上时，让showIndex等于当前移入的index，同时循环里判断如果自己的index等于showIndex就展示，代码如下。

<div class="nav-bt">
    <ul class="clearfix father-ul">
      <li v-for="(item,index) in navs" @mouseover="showIndex=index">
        <router-link :to="item.href" v-text="item.content" >
        </router-link>
        <div class="drop-div" v-if="!!item.child" v-show="index==showIndex">
          <span class="trangle"></span>
          <ul class="child-ul">
            <li v-for="item_child in item.child.child_content">
              <router-link :to="item_child.href">{{item_child.content}}</router-link>
            </li>
          </ul>
        </div>
      </li>
    </ul>
</div>

Answer 5

移入事件 mousemove