아래 글을 따라하며 VueJS에 적응하기
[맨땅에VueJS]클래스와 스타일 바인딩
아래에 준비된 예시를 살펴봅시다. HTML 코드를 보시면, 클랙스가 demo 인 div 태그 3개가 있습니다. 클래스 demo의 스타일은 CSS 탭에서 볼수있듯이 가로세로 100px 짜리 회색 사각형으로 설정해두었습
medium.com
요약
<v-bind:class="클래스명">
<v-bind:class="{ 클래스명: 조건 }">
class="demo"
@click="attachRed = !attachRed"
:class="{red: attachRed, green: !attachRed}"
click 시 값변경
class red와 green의 값 변경
class="demo"
:class="divClasses"
divClasses computed 호출
divClasses: function() {
return {
red: this.attachRed,
green: !this.attachRed
}
}
Style 바인딩
v-bind:style="{ 스타일명: 스타일값, 스타일명: 스타일값}"
- 실제 실행화면
