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

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

App.vueexport default {
  data() {
    return {
      
    }
  }
}

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

App.vuedata() {
  return {
    text1: '111',
    text2: '222',
  }
}

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

App.vue<template>
  {{ text1 }}
  {{ text2 }}
</template>

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

App.vue<template>
  <p>{{ text1 }}</p>
  <p>{{ text2 }}</p>
</template>

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