技術標籤：javascriptcssvue.js

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);
      },

最終實現效果：


作為前端小白，還有很多沒考慮周全，希望大家多多指教，也希望本文給一些小白簡單的幫助。謝謝！