2020-12-09

Vue 动态添加class

本文主要是来源于前段时间自己做一个导航菜单的demo。为了实现导航效果，须在激活菜单栏上加入激活样式。我采用JS方法，通过点击添加。

实现原理

利用html的DOM元素上的classList属性，这个属性主要存储的就是当前DOM元素附加的class名的列表。

下面是导航菜单html模板

<!--导航菜单-->
        <ul>
          <li v-for="(item,index) in navList"
              :key="index"
              @click="addCSS(index)"
              :class="'ul_list_'+index">
            <span class="nav_content">{{item}}</span>
          </li>
        </ul>

通过点击事件，传入一个index值，根据index值，然后利用getElementsByClassName()获取到对应的li标签，最后我选择将在span标签上添加类。具体方法如下：

addCSS(index){
        //获取上一次点击的index
        //我将上一次点击的值保存在VueX中，如值需要一个vue文件可以设置一个全局变量保存
        let oldIndex = this.$store.state.navIndex;
        //将上一次点击的li对象上移除activeLi类
        if(oldIndex != null){
          let oldClickDom = document.getElementsByClassName("ul_list_"+oldIndex)[0].children[0];
          oldClickDom.classList.remove("activeLi");
        }
        //如果index等于-1,所有导航栏都不加激活样式
        if(index === -1){
          return;
        }
        //获取当前点击对象，并添加activeLi类
        //[0]是必须加上，因为getElementsByClassName()返回的是HTML集合，下标取0才能取到所要的DOM对象
        let clickDom = document.getElementsByClassName("ul_list_"+index)[0];
        //需要将activeLi类添加到span标签上，因此需要调用li标签的children属性获取span  DOM对象
        let children = clickDom.children[0];
        children.classList.add("activeLi");
        //将当前点击的index保存到状态管理器中
        this.$store.commit("setNavIndex",index);
      },

最终实现效果：


作为前端小白，还有很多没考虑周全，希望大家多多指教，也希望本文给一些小白简单的帮助。谢谢！