การดำเนินการโค้ดใน View ของ Vue

ภายในเครื่องหมายปีกกาสามารถดำเนินการโค้ด JavaScript ต่างๆ ได้ ลองดูตัวอย่างนี้ สมมติว่ามีคุณสมบัติสองตัวที่มีตัวเลข - var1 และ var2:

data() {
	return {
		var1: 1,
		var2: 2,
	}
}

ตัวอย่าง ลองบวกค่าของคุณสมบัติของเรา:

<template>
	{{ var1 + var2 }}
</template>

ผลลัพธ์ของโค้ดนี้จะเป็น HTML ต่อไปนี้:

<div id="app">
	3
</div>

สมมติว่าใน data เก็บข้อมูลต่อไปนี้:

data() {
	return {
		num: 5,
	}
}

แสดงค่ากำลังสองของคุณสมบัติ num บนหน้าจอ

สมมติว่าใน data เก็บข้อมูลต่อไปนี้:

data() {
	return {
		num1: 1,
		num2: 2,
		num3: 3,
	}
}

แสดงผลรวมของคุณสมบัติ num1, num2 และ num3 บนหน้าจอ