vue) v-bind 속성 (디렉티브) _:title / :src / :class

디렉티브는 vue에서 제공하는 특수 속성임을 나타내는 v- 접두어가 붙으며

렌더링된 DOM에 특수한 반응형 동작을 한다.  

 

v-bind:title

See the Pen v-bind:title by dpals-103 (@dpals-103) on CodePen.

 

 

• v-bind 속성을 사용할 때는 v-bind:title 가 기본형태이며 :title 로 축약해서 사용할 수 있다. 

   

  • [예제설명] v-bind:title ====== 이 요소의 title속성을 vue 인스턴스의 'sum 또는 name' 의 속성으로 최신상태를 유지한다 

 

 

 

v-bind:class

See the Pen class 사용여부를 true,false 로 지정 by dpals-103 (@dpals-103) on CodePen.

 

• [예제설명] v-bind:class ====== 이 요소에 class명(.active)를 적용할지 안할지를 vue인스턴스의 'mode' 속성의 true,false로 지정할 수 있다. 

 

 

 

v-bind:src

See the Pen v-bind:src / :src by dpals-103 (@dpals-103) on CodePen.

 

• [예제설명] v-bind:src ====== 해당 이미지의 주소를 vue 인스턴스의 '이미지주소' 속성으로 값을 최신상태로 유지한다.