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

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

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

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

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

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

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

<template>
	<img :src="attr">
</template>

data에 텍스트와 링크 주소가 저장되어 있다고 가정합니다:

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

이 데이터를 사용하여 다음 코드를 구성하세요:

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