Vue Js에서 메뉴 루프에 대한 활동 클래스를 동적으로 추가하는 방법은 무엇입니까?

Question

메뉴를 동적으로 표시하는 루프에 활성 클래스를 추가하는 방법은 무엇입니까? 열린 메뉴에 대한 활동 클래스를 설정할 수 없습니다.

     //module.route는 데이터베이스 열입니다.
      
        //module.icon은 데이터베이스 열입니다.
       

         {{ 모듈.이름 }}
            //module.name은 데이터베이스 열입니다.
       
  

데이터베이스의 메뉴 목록을 표시합니다. 이제 열린 메뉴를 활성화하고 싶습니다. 
            

Answer 1

제가 한 일입니다.

으아악

추가하고 싶은 탭을 모두 tabs라는 배열에 추가했습니다.

으아악

이렇게 하면 배열의 각 탭에 대한 <li> 요소가 생성됩니다tabs中的每个tab创建一个<li>.

모든 요소에는 nav-link类，并且使用v-bind，如果变量active_tab等于tab，则会将active添加到元素的类列表中。每当用户点击其中一个选项卡时，使用@click将active_tab更改为用户点击的tab이 포함됩니다.

스타일

으아악