Vue 메뉴 표시 줄 을 클릭 하여 하나의 class(하 이 라이트)로 전환 하 는 방법

단계:
대상(goods)을 옮 겨 다 니 며 메뉴 표시 줄 의 대상(item)과 아래 표 시 를 가 져 옵 니 다(index)
이벤트 toggle()을 클릭 하여 다음 매개 변 수 를 입력 하 십시오:@click="fn1();fn2()"
동적 전환 classname::class="{'active':index=checkindex}">(class 는 다음 값 에 대응 하 는 DOM 을 부여 합 니 다)
ps:이 방법 은 class 를 직접 전환 합 니 다.다른 비 동적 DOM 을 제거 하 는 class 를 수 동 으로 추가 할 필요 가 없습니다.
html

<ul>
   <li v-for="(item,index) in goods" class="menu-item" @click="toggle(index);scrollToFoods(index)"
   :class="{'active':index ==checkindex }">
   </li>
  </ul>

script

export default {
 data () {
  return {
  checkindex: 0 //           
  }
 },
 methods: {
  toggle (index) {
  this.checkindex = index
  }

css

 .active {
 background: white;
 }

효과 도 표시:


확장 지식:element-ui 내 비게 이 션 하 이 라이트 가 저 지 른 잘못
동료 가 만 든 vue+elementui 프로젝트 에 버그 가 생 겼 습 니 다.elementui 내 비게 이 션 하 이 라 이 트 는 계속 오류 가 발생 했 습 니 다.3 시간 넘 게 테스트 를 하고 나 에 게 물 었 더 니 비극 적 으로 잔업 을 했다.
마지막 으로 정말 짜증 이 났 습 니 다.네 비게 이 션 은 elementui 구성 요 소 를 사용 하 는 것 을 포기 하고 직접 직접 썼 습 니 다.오늘 시간 이 있어 서 정말 불복 하여 스스로 하나 썼 다.그냥 넘 어 갔 어.
코드 붙 이기:

<template>
 <el-menu
 :default-active="$route.path"
 background-color="#383838"
 text-color="#ccc"
 active-text-color="#fff000" router>
 <el-menu-item index="/dashboard">
  <span slot="title">  </span>
 </el-menu-item>
 <el-submenu index="2">
  <template slot="title">  1</template>
  <el-menu-item index="/nav1/index">  11</el-menu-item>
  <el-submenu index="2-2">
  <template slot="title">  12</template>
  <el-menu-item index="/nav2/nav1">  121</el-menu-item>
  <el-menu-item index="/nav2/nav2">  122</el-menu-item>
  </el-submenu>
 </el-submenu>
 </el-menu>
</template>

나중에 세부 사항 을 비교 해 보 니 자신 이 동료 에 게 끌 려 갔다 는 것 을 알 게 되 었 다.그 당시 에 저 지 른 잘못(얽 힌 부분)을 정리 했다.

:default-active="$route.path"

현재 하 이 라 이 트 를 정의 합 니 다.예:현재 페이지 는 총람 입 니 다.인쇄 를 통 해$route.path 의 값 이'dashboard'가 아니 라'dashboard'라 는 것 을 알 수 있 습 니 다.전 자 는$route.path 이 고 후 자 는$route.name 입 니 다.나중에 쓸 게 요.

router>

여 기 는 할 말 이 없 으 니 라 우 터 로 바로 가면 됩 니 다.

<el-menu-item index="/dashboard">

앞 에 있 는$route.path/$route.name 에 따라 값 을 입력 해 야 합 니 다.이 세 가 지 는 기본적으로 틀림없다.내 비게 이 션 하 이 라 이 트 는 기본적으로 문제없다.
다른 화식 서법 에 대해 서 는 나중에 계속 연구 할 것 이다.
이상 의 Vue 메뉴 표시 줄 에서 클릭 하여 하나의 class(하 이 라이트)로 전환 하 는 방법 은 바로 편집장 이 여러분 에 게 공유 하 는 모든 내용 입 니 다.여러분 에 게 참고 가 되 고 많은 응원 을 바 랍 니 다.