Làm việc với thuộc tính trong framework Vue

Có thể chèn các giá trị từ các thuộc tính trong data không chỉ vào văn bản mà còn vào các thuộc tính của thẻ. Điều này được thực hiện bằng directive v-bind.

Hãy sử dụng directive này để thiết lập giá trị cho thuộc tính src của thẻ img. Giả sử giá trị mong muốn được lưu trong thuộc tính:

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

Hãy ghi giá trị từ thuộc tính vào thuộc tính src:

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

Thông thường, mọi người sử dụng dạng viết tắt của v-bind. Nó đơn giản là một dấu hai chấm đứng trước tên thuộc tính:

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

Giả sử trong data lưu trữ văn bản và địa chỉ liên kết:

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

Hãy tạo mã sau bằng cách sử dụng dữ liệu này:

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