javascript - 하단 구성 요소, Vue 바운드 클래스 텍스트의 색상이 변경되지 않는 이유는 무엇입니까?

Question

나는
데이터를 넣었다() {

으아악

},
의 'a'를 'b'로 바꾸면 게시된 단어의 색상이 변경됩니다

<template lang="html">
<p class="footer">

으아악

</p>
</template>

<script>
기본값 내보내기 {
데이터 () {

으아악

},
방법: {

으아악

}
}
</script>

<style lang="less">
.footer {

으아악

}
.active {

으아악

}
</style>

Answer 1

귀하가 작성한 내용이 너무 복잡합니다. 이는 경로를 구성할 때 linkActiveClass를 작성하여 수행할 수 있습니다.
구성은 main.js 정의 경로에 작성할 수 있습니다. = 새로운 VueRouter({
으아악

})

그런 다음 .vue 스타일에 .active{color: #41B883;} 스타일을 추가하세요

router-link는 다음과 같이 작성됩니다<router-link to="/" class="item">Homepage</router-link>

Answer 2

@click.native로 대체하면 충분합니다. 물론 위의 방법이 더 좋습니다

Answer 3

클릭 이벤트를 @click.native="select('a')";로 대체합니다.
이런 종류의 탐색을 작성할 때 일반적으로 v-for
<ul>

메서드를 사용합니다. 으아악

</ul>
데이터(){

으아악

Answer 4

으아악

선택한 스타일 .act-bar를 정의할 수 있습니다{}

Answer 5

으아악 으아악

이렇게 하세요. .router-link-active에 설정된 색상은 현재 클릭하고 있는 라우터 링크입니다. 활성화 후 스타일 색상을 다른 스타일로 설정할 수도 있습니다. 그러면 다른 라우터 링크가 기본값으로 복원됩니다. . 스타일