[vue/js] Vue 의 html 속성에 변수 매핑하기 v-bind

Vue의 html에 js 변수 매핑하기 v-bind

해당 포스팅은 Vue 의 공식문서를 참조하여 작성하였습니다.

html에는 속성이 있습니다. 이 속성에다가 js의 변수를 대입하고 싶을때가 있습니다. 그럴때 사용하는 문법이 바로 v-bind 디렉티브 입니다.

디렉티브는 v- 접두사로 시작하는 특별한 속성입니다. 보통 디렉티브의 값은 컴포넌트의 상태에 접근할 수 있는 js 표현식이 됩니다.

사용방법은 다음과 같습니다.

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

여기서 주의해야 할 점은, v-bind 에는 앞서 봤던 머스태쉬는 들어올 수 없다는 점입니다. 머스태쉬는 text 영역에만 대입 가능합니다.

또한, v-bind 는 많이 사용하는 문법이라 생략 가능합니다.

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

이 속성을 사용하여 다음과 같이 class 속성을 부여할 수 있습니다.

<script setup>
import { ref } from "vue";
const titleClass = ref("title");
</script>

<template>
    <!-- v-bind는 js의 변수값을 읽는 용도라서 사용 가능 -->
    <h1 v-bind:class="titleClass">ㅎㅇ</h1>
    <!-- v-bind가 없으면 단순한 문자열을 넣는게 됨-->
    <h1 class="title">ㅎㅇ</h1>
    <!-- 아래처럼 v-bind가 없으면 머스태시 쓸 수 없음-->
    <h1 class="">ㅎㅇ</h1>
</template>

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