Vue.js 데이터 바인딩: v-bind 디렉티브를 활용하여 속성과 클래스를 동적으로 제어하기

예제 1: 속성 바인딩

파일명: AttributeBinding.vue

<template>
  <div>
    <a v-bind:href="url">Go to Google</a>
  </div>
</template>

<script>
export default {
  data() {
    return {
      url: 'https://www.google.com'
    };
  }
};
</script>

출력 결과:

<div>
  <a href="https://www.google.com">Go to Google</a>
</div>

설명:
이 예제에서는 Vue의 v-bind 디렉티브를 사용하여 href 속성을 동적으로 바인딩합니다. href 속성에 바인딩된 값은 data 속성의 url 값입니다. 따라서 a 태그는 클릭 시 지정된 URL로 이동합니다.

예제 2: 클래스 바인딩

파일명: ClassBinding.vue

<template>
  <div>
    <button v-bind:class="{ active: isActive }">Click me</button>
  </div>
</template>

<script>
export default {
  data() {
    return {
      isActive: false
    };
  }
};
</script>

<style scoped>
.active {
  background-color: blue;
  color: white;
}
</style>

출력 결과:

<div>
  <button class="">Click me</button>
</div>

설명:
이 예제에서는 Vue의 v-bind 디렉티브를 사용하여 클래스를 동적으로 바인딩합니다. isActive 데이터 속성의 값에 따라 버튼에 active 클래스가 추가되거나 제거됩니다. active 클래스가 추가되면 버튼의 배경색과 글자색이 변경됩니다.

위의 예제를 통해 Vue.js에서 v-bind 디렉티브를 사용하여 속성과 클래스를 동적으로 제어하는 방법을 자세히 알아보았습니다. 데이터 바인딩을 통해 화면을 동적으로 업데이트하는데 유용한 기능입니다.