Vue(version 3) 주요 기능 정리(v-bind) #9

주요 기능 정리 #8에서는 v-on을 사용했을 경우에 대해서 알아봤다.
이번 주제는 v-bind 사용하는 법을 소개해보고자 한다.

v-bind 는 v-bind:{속성} 이렇게 사용하며, 축약식으로 :{속성} 으로 사용한다.

<template>

  <div :id="testId" :class="testClass"></div>

  <custom-component :use-button="false" :title="'버튼이 없는 컴포넌트'"></custom-component>

  <custom-component use-button :title="'버튼이 있는 컴포넌트'"></custom-component>

</template>

<script setup lang="ts">

import CustomComponent from './Sample.vue'

const testId = ref('test')

const testClass = ref({ active: true, depth1: false })

</script>

/// './Sample.vue' 파일

<template>

  <div>

    <span>{{ title }}</span>

    <button v-if="useButton"></button>

  </div>

</template>

<script setup lang="ts">

interface Properties {

  useButton: boolean

  title: string

}

const props = withDefaults(defineProps<Properties>(), {

  useButton: false,

  title: ''

})

</script>

1번째 예제 처럼 기본 Element 의 Attribute에 사용하는 법이 있다. 스크립트 단에서 변수를 통해서 변경이 가능하며, id는 string 형식을 사용하고, class는 string[] 형태나, object 형식으로 사용이 가능합니다.

2,3번째 예제처럼 custom component에 속성을 넘겨주는 방식으로도 사용된다.
useButton 의 속성 처럼 boolean 으로 사용할 경우 간단하게 use-button 만 선언해두면 true 를 넘긴다고 생각하면 됩니다.
string이나, object 형식도 넘겨줄 수도 있습니다.