vue v-for后鼠标移进出事件

未使用v-for循环的路由

我的项目刚开始每一个导航路由都是分开独立出来的，然后觉得代码累赘，增加维护工作量，常常改一点就要全部一个一个修改

<!--部分导航-->
      <router-link to="/" >
        <div class="n_box_content" >
          <div class="n_content_index">
            <span class="n_content_index_typeface">首页</span>
          </div>
          <div class="n_content_index_line_true"></div>
        </div>
      </router-link>

<router-link to="/A" >
        <div class="n_box_content" >
          <div class="n_content_index">
            <span class="n_content_index_typeface">A</span>
          </div>
          <div class="n_content_index_line_true"></div>
        </div>
      </router-link>

<router-link to="/B" >
        <div class="n_box_content" >
          <div class="n_content_index">
            <span class="n_content_index_typeface">B</span>
          </div>
          <div class="n_content_index_line_true"></div>
        </div>
      </router-link>

使用v-for循环路由

于是就打算做一个v-for循环，因为考虑到只有路由和名字不一样，其他都是同样的操作，于是把他们抽离出来，放到data中，然后做一个循环，把他们渲染在导航里。

 <!--v-for循环路由-->
      <router-link :to="{path:item.route}" v-for="(item,index) in router" :key="index" :id="index">
        <div class="n_box_content" @mouseover="mouseover(index)" @mousemove="mousemove(index)">
          <div class="n_content_index">
            <span class="n_content_index_typeface">{{item.name}}</span>
          </div>
          <div v-show="index==idx" class="n_content_index_line_true"></div>//v-show的好处
        </div>
      </router-link>

data() {
    return {
      router: [
        { route: "/", name: "首页" },
        { route: "/A", name: "A" },
        { route: "/B", name: "B" },
        { route: "/C", name: "C" },
        { route: "/D", name: "D" },
        { route: "/E", name: "E" },
        { route: "/F", name: "F" }
      ],
      idx: "0",
    };
  },

鼠标移进来移出去事件，v-show是重点。
刚开始我的思路是，利用v-for循环router-link，然后每一个路由绑定相对于的事件，使用三木运算的方法来改变底部显示横线。但是发现他们是同时改变，而不是单个改变。
然后发现用v-show就能解决这个问题，首先每个路由绑定一个id，:id="index"，然后再data中定义idx=“0”，所以刷新的时候它会在首页里显示，然后利用@mouseover="mouseover(index)" @mousemove="mousemove"这两个移进移出方法对idx的值进行修改就可以实现功能。

  methods: {
    mouseover: function(e) {
      var that = this
      that.idx=e;
    },
    mousemove: function(e) {
    }
  }

想要实现功能

有问题欢迎留言探讨！

最后编辑于：2019.07.24 14:30:51