Vue 프레임워크에서 속성 작업하기

data의 속성 값은 텍스트뿐만 아니라 태그의 속성에도 삽입할 수 있습니다. 이는 v-bind 지시어를 사용하여 수행됩니다.

이 지시어를 사용하여 img 태그의 src 속성 값을 설정해 봅시다. 원하는 값이 다음 속성에 저장되어 있다고 가정합니다:

App.vuedata() {
  return {
    attr: 'img.png',
  }
}

속성에서 src 속성으로 값을 기록해 봅시다:

App.vue<template>
  <img v-bind:src="attr">
</template>

일반적으로 모두 v-bind의 축약형을 사용합니다. 이것은 속성 이름 앞에 콜론을 붙인 것에 불과합니다:

App.vue<template>
  <img :src="attr">
</template>

App.vuedata() {
  return {
    text: 'page',
    href: 'page.html',
  }
}

html<a href="page.html">page</a>