Vue.js: Data และ Methods

wave
มานพ กองอุ่น 7 ก.ค. 2018 01:50:47 6,200

logo.png

ในบทเรียนรู้นี้เรามาเรียนรู้ data หรือ ข้อมูล และ methods หรือ กระบวนการ โดยมี code ดังต่อไปนี้

data จะอยู่ภายใน tag data:{} เช่น

 data: {
      text: 'มันยอดเยี่ยมเลยใช่ไหม',
      universities: [
        { id: 1, name: 'มหาวิทยาลัยอุบลราชธานี' },
        { id: 2, name: 'มหาวิทยาลัยขอนแก่น' },
        { id: 3, name: 'มหาวิทยาลัยมหาสารคาม' }
      ]
    }

และ methods จะอยู่ภายใน tag medods: {} เช่น

methods: {
    say: function(msg){
      return msg + this.text;
    }
  }

ซึ่งใน method เราสามารถส่งค่าเข้าไปประมวลผลได้ตามโปรแกรมที่เราเขียนไว้ แล้วเราอาจเขียนเพื่อให้ return ค่าบางอย่างกลับหลังการประมวลผล

นอกจากนั้นเรายังสามารถ access data ได้จากการเรียก this อีกด้วย

 

See the Pen Vue09 by Manop Kongoon (@kongoon) on CodePen.


ความคิดเห็น

หากบทเรียนรู้มีความผิดพลาดประการใด หรือมีข้อเสนอแนะกรุณาแจ้ง contact@programmerthailand.com

เขียนบทเรียนรู้ของคุณ

รายละเอียด
  • ดู 6,200
  • รักเลย 0
  • หมวดหมู่ VueJS
  • เขียนเมื่อ
  • แก้ไขเมื่อ
  • Tags vuejs data methods
ข้อมูลผู้เขียน
มานพ กองอุ่น

มานพ กองอุ่น

เป็นสมาชิกเมื่อ: 18 ธ.ค. 2009