v-bind

공식 문서

• 스타일 바인딩 : https://kr.vuejs.org/v2/guide/class-and-style.html#인라인-스타일-바인딩

• 클래스 바인딩 : https://kr.vuejs.org/v2/guide/class-and-style.html#HTML-클래스-바인딩하기

바인딩 방법

• 기본적으로 객체, 배열 구문

• data(), computed() 를 활용 할 수 있다

• 컴포넌트에 사용자가 또 다시 class를 적용하 컴포넌트에 정의된 클래스와 함께 추가됨. link

궁금했던 점

• :class 할 때 객체방식과 배열방식 사용 차이

// 객체 방식 : 
:class="{'클래스명': '조건'}"
:class="{'클래스명'조건', '클래스명' :'조건'}"
:class="{isAction: isAction}"


// 배열 방식 : 좀더 플렉서블하다 조건 구문 사용 가능
:class="[조건? 'ture일 경우 class name' : 'false일 경우 class name']"
:class="[조건? 'ture' : 'false', 조건? 'ture' : 'false']"
// + 디폴트 클래스네임이 필요한 경
:class="['디폴트클래스네임', 조건? 'ture' : 'false']"
:class="['btn', 조건? 'ture' : 'false' ]"

// 여러개의 조건의 클래스가 있는 경우 배열 구문 내에서 객체 구문을 사용할 수 있다.
:class="[{ active: isActive, disabled: disabled, open: open }, errorClass]

// 스타일 바인
:style="{ 스타일명: 스타일값, 스타일명: 스타일값}"
:style="{ color: activeColor, fontSize: fontSize + 'px' }"
:style="[iconSrc && { backgroundImage: `url(${iconSrc})` }]"

추가로 알게된 점

• :class="" 와 class="" 함께 사용할 수 있다.

// 1 예로 Button 컴포넌트 만들때로 가정 
// 데이터를 바인딩 할 수 있는 :class 와 일반 class 를 동시에 작성
<button 
    class="btn_open"
    :class="['btn', size && `${size}`, {round: round, disabled: disabled}]"
>
    버튼
</button>

// 2 사용자가 Button 컴포넌트에 또 다시 클래스를 추가할 경우  
<Button class="new_class">버튼</Button>


// 최종 render 버튼  
<button class="btn_open btn new_class">버튼</button>