vue ) v-bind:class와 router-link-active 효과 적용

이 전에 메뉴 선택 시 style 변경을 주는 작업을 했었는데
그 때에는 값을 비교하는 것으로 변경을 적용시켜서 쉽게 할 수 있었다.

ex)

	    <span
          class="subTit"
          :class="{ active: activeList == '전체' }"
        >
          전체
        </span>
        <span
          class="subTit"
          :class="{ active: activeList == '인기 영상' }"
        >
          인기 영상
        </span>

vue에서는 v-bind: 라는 것이 있어서 class와 style을 쉽게 binding시킬 수 있다. (짱편함)

👉 class

위 예시코드에서 먼저 첫 번째 class인 class="subTit"은 일반적인 상황에서 보여지는 style을 적용시키기 위해 준 class이다.

👉 v-bind:class

두 번째 class인 :class="{active: acitveList == '인기영상' }" 이 부분이 바로 class에 v-bind를 연결시킨 것이다.

<div v-bind:class="{ active: isActive }"></div>
 🌱 v-bind를 :로 축약할 수 있듯 v-bind:class 도 :class로 축약할 수 있다.
 🌱 이 코드는 해당 div영역의 `isActive`가 true값이 되었을 때 .active를 적용시킨다는 의미이다.

위 기본 형태가 있고, 나는 activeList안에 담긴 값이 '인기영상', '전체'등의 목록에 해당할 경우에만 .active가 적용되도록 바인딩 한 것이다.

기본 형태 = :class="{ className }"

이렇게 적용시킨 v-bind:class에 style을 적용시키려면, hover되었을 때 적용시키는 방법과 똑같이 하면 된다.

<style lang="scss"> 
.subTit {
     background-color: #f0f0f0;
     cursor: pointer;
		&.active {
      	  	 background-color: #dbfaec;
       		 border: 1px solid #b4f5d8;
    	}
 }
 </style>

---

그렇지만..! 내가 하려고 했던 것은 데이터를 비교하여 효과를 주는 것이 아니라
router-link를 비교하여 적용 시키는 것이었는데, 이 것은 v-bind:class로는 할 수 없다.
개발자화면을 켜고 확인해보면, 원하는 목록을 선택했을 때 해당 목록의 영역에 이렇게 내가 따로 걸지 않았지만 router-link-active, router-link-exact-active가 걸려있는 것을 확인할 수 있다.

이 것을 이용하면 쉽게 style을 적용시킬 수 있당.그냥 위에서 :class바인딩 한 것 처럼 저 새로운 클래스가 적용된것을 써주면 된다.

아주 간단하다.
끝~~

---

v-bind란? ) 간편하게 데이터, 속성, 구성요소를 연결시킬 수 있는 기능.
1] 이미지 데이터 연결 : v-bind:src
2] 링크를 통한 연결 : v-bind:href
3] 스타일시트 연결 : v-bind:class, v-bind:style
4] 키를 통한 연결 : v-bind:key

---

👩‍💻 v-bind:class