ออบเจกต์ data ใน Vue

พื้นฐานของคอมโพเนนต์คือข้อมูล ที่เราจะจัดการ ข้อมูลเหล่านี้ถูกเก็บไว้ในออบเจกต์พิเศษ data ออบเจกต์นี้ ควรถูกส่งคืนเป็นผลลัพธ์ของ เมธอดพิเศษ:

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

ลองเก็บข้อความบางอย่าง ในคุณสมบัติของออบเจกต์ข้อมูลกัน:

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

ข้อมูลที่เก็บไว้สามารถแสดงผลได้ ในเทมเพลต ทำได้ โดยใช้วงเล็บปีกกาคู่ ภายในเขียนชื่อคุณสมบัติ ที่เราต้องการจะ แสดงค่าของมัน ลองแสดงค่า ของคุณสมบัติของเรากัน:

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

และตอนนี้ทำให้แต่ละ ข้อความของเราแสดงใน ย่อหน้าของตัวเอง:

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

ให้ใน data เก็บชื่อ และนามสกุลของผู้ใช้:

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

แสดงแต่ละคุณสมบัติใน แท็ก div แยกกัน