속성 바인딩

Vue 에서는 mustaches (이중 중괄호)는 텍스트 보간만 사용합니다. 동적 값을 속성에 바인딩하려면 v-bind지시문을 사용합니다.

<div v-bind:id="dynamicId"></div>

지시어는 로 v-시작하는 특별한 속성입니다. 이것은 Vue 템플릿 구문의 일부입니다. 텍스트 보간과 마찬가지로 지시문의 값은 구성 요소의 상태에 액세스할 수 있는 JavaScript 식입니다. v-bind및 지시문 구문에 대한 자세한 내용은 가이드 - 템플릿 구문 에서 설명합니다.

콜론 뒤의 부분 ( :id)은 지시문의 "인수"입니다. 여기서 요소는 id구성 요소의 상태에서 dynamicId속성과 동기화됩니다.

v-bind매우 자주 사용하기 때문에 전용 약어가 있습니다.

<div :id="dynamicId"></div>

이제 ref를 값으로 동적 속성 바인딩을 추가해 보겠습니다. 올바르게 바인딩할 수 있으면 문자가 빨간색입니다.titleClass

  <script setup>
import { ref } from 'vue'

const titleClass = ref('title')
</script>

<template>
  <h1 :class="titleClass">Make me red</h1>
</template>

<style>
.title {
  color: red;
}
</style>