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

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

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

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

App.vue<template>
  {{ var1 + var2 }}
</template>

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

html<div id="app">
  3
</div>
Задание 1

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

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

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

Задание 2

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

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

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