Vue.js

:class

sdafdq 2023. 10. 13. 13:57

:class="변수"

하면 받을 수 있다.

그게 class가 된다.

 

그리고,

 

data(){
	on:false
}

이런 식으로 있을 때,

:class="on"

 

했을 때, 저게 true면 

class에 on이 들어가는 거다.

 

그래서 다른 컴포넌트에서 저 컴포넌트한테

:on = "isOn"

 

등 해서 true false 등을 동적으로 할당할 수 있다. (물론 같은 컴포넌트에서 on 바꿀 수도 있음)

 

만약 스타일에 변화를 주고 싶다면

 

원래 하던 것 처럼

 

btn.on {}

 

이런 식으로 on 됐을 시 스타일을 주면 된다.

 

 

 

참고로, 외부에서 class="appClass"

이렇게 부여할 수도 있는데,

이러면 저 컴포넌트의 클래스에 추가하는 거임.

 

 

'Vue.js' 카테고리의 다른 글

최상위 요소(최상위 엘레멘트)  (0) 2023.10.13
slot  (0) 2023.10.13
form 이벤트, v-model  (0) 2023.10.11
키 이벤트  (0) 2023.10.11
@wheel.passive  (0) 2023.10.10