
[Vue.js] Vue.js 디렉티브
Framework/Vue.js
2023. 7. 24. 10:55
Vue.js는 디렉티브(Directives)를 사용하여 HTML 요소에 특별한 동작을 적용하는 방법을 제공합니다. 디렉티브는 v- 접두사를 갖는 특수한 속성으로, Vue 인스턴스의 데이터와 상호작용하도록 합니다. 아래에서 Vue 디렉티브에 대해 자세히 알아보겠습니다. v-bind v-bind 디렉티브는 Vue 데이터와 HTML 속성을 바인딩합니다. 데이터 값을 동적으로 HTML 속성에 연결할 때 사용됩니다. 위의 코드에서 v-bind:src는 Vue 인스턴스의 imageUrl 데이터를 src 속성과 바인딩하여 이미지 URL을 동적으로 설정합니다. 간단한 형태로 축약하여 사용할 수도 있습니다. 위의 코드와 같이 :로 축약하여 표현할 수 있습니다. v-if와 v-else v-if 디렉티브는 조건부 렌더링을 ..