Đối tượng data trong Vue

Nền tảng của một component là dữ liệu, mà chúng ta sẽ thao tác. Dữ liệu này được lưu trữ trong một đối tượng đặc biệt data. Đối tượng này phải được trả về bởi kết quả của một phương thức đặc biệt:

export default {
	data() {
		return {
			
		}
	}
}

Hãy lưu trữ trong thuộc tính của đối tượng dữ liệu một văn bản nào đó:

data() {
	return {
		text1: '111',
		text2: '222',
	}
}

Dữ liệu được lưu trữ có thể hiển thị trong template. Điều này được thực hiện bằng cặp dấu ngoặc nhọn kép, trong đó viết tên thuộc tính, mà giá trị của nó chúng ta muốn hiển thị. Hãy hiển thị giá trị của các thuộc tính của chúng ta:

<template>
	{{ text1 }}
	{{ text2 }}
</template>

Và bây giờ hãy làm sao cho mỗi thông báo của chúng ta hiển thị trong đoạn văn riêng của nó:

<template>
	<p>{{ text1 }}</p>
	<p>{{ text2 }}</p>
</template>

Giả sử trong data lưu trữ tên và họ của người dùng:

data() {
	return {
		name: 'john',
		surn: 'smit',
	}
}

Hiển thị mỗi thuộc tính trong một thẻ div riêng biệt.