Vue实现动态数目的标签切换

结果

分析

首先，标签个数是不一定的，所以采用CSS的hover是不可以的。
可以使用mouseenter事件，绑定一个方法并传入当前的index，设置hide类，并确保鼠标移入的标签对应的div没有此hide类，其他未被移入的div拥有hide类。

代码实现

          <div class="categoryName" @mouseenter="changeFocused(index)">
            {{ category }}
          </div>

    changeFocused(index) {
      let item;
      for (let i = this.order_; i < this.order_+this.categoryLength; i++) {
        item = document.getElementsByClassName("categoryItem")[i];
        if (i == index) {
          //当前移入的元素
          //则不应该有hide
          if (item.className.search("hide") > 0) {
            item.className = "categoryItem";
          }
        } else {
          //当前没有移入的元素
          //则应该有hide
          if (item.className.search("hide") < 0) {
            item.className += " hide";
          }
        }
      }
    }