ProgrammerThailand
สมัครใช้งาน เข้าสู่ระบบ
สมัครสมาชิก เข้าสู่ระบบ
  • หน้าหลัก
  • คอร์สเรียน
  • ตลาด
  • กระดานกระทู้
  • กิจกรรม
  • บทเรียนรู้
  • บทความ
  • งาน
  • นักพัฒนาฯ

Vue.js: v-model

  • หน้าหลัก
  • บทเรียน
  • VueJS 2
  • Vue.js: v-model

Vue.js: v-model

โดย มานพ กองอุ่น

23 มิ.ย. 2018, 18:21:20

669

v-model เป็นการ 2 way binding คือเมื่อเปลี่ยนแปลงค่าฝั่ง html ฝั่ง program data ก็เปลี่ยนตาม เช่นกันเมื่อเปลี่ยนฝั่ง program data ฝั่ง html ก็เปลี่ยนตาม

index.html

<html>
    <head>
        <link rel="stylesheet" href="index.css">
        <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    </head>
    <body>
    
        <div id="app">
            <p>{{ text }}</p>
            <input v-model="text">
        </div>
        
        <script src="index.js"></script>
    </body>
</html>

index.js

var app = new Vue({
  el: '#app',
  data: {
    text: 'สวัสดีชาวโลก'
  }
})

 

แชร์โพสต์นี้

  • vuejs

มานพ กองอุ่น

มานพ กองอุ่น : Developer

มานพ กองอุ่น

มานพ กองอุ่น
admin

  • 2 เพื่อน
  • 20 ผู้ติดตาม
  • 845 โพสต์

ความคิดเห็น

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

ร่วมเขียนบทเรียนจากประสบการณ์ของคุณ เพื่อแชร์ให้กับชนรุ่นหลังได้นำไปพัฒนาตัวเอง

  • โดย มานพ กองอุ่น
  • เปิดดู 669 ครั้ง
  • เขียนเมื่อ 23 มิ.ย. 2018, 18:21:20
  • แก้ไขเมื่อ 23 มิ.ย. 2018, 18:21:20
  • Tags vuejs

เนื้อหาที่เกี่ยวข้อง

  • สารบัญคู่มือการใช้งาน VueJS2

  • Vue.js: สวัสดีชาวโลก!

  • Vue.js: เงื่อนไข (Conditionals)

  • Vue.js: วนลูปด้วย For

  • Vue.js: การจัดการเมื่อผู้ใช้คลิกปุ่ม

  • Vue.js: v-model

  • Vue.js: Components

  • Vue.js: Component ที่มี props

  • Vue.js: Data และ Methods

  • Vue.js: Data Binding

  • Vue.js: Events

  • Vue.js: Event modifiers

สังคมนักพัฒนาระบบในประเทศไทย

  • Phone: +66989616944, +66619569525
  • contact@programmerthailand.com

เกี่ยวกับเรา

  • เกี่ยวกับเรา
  • ติดต่อเรา
  • นโยบายการให้บริการ
  • นโยบายความเป็นส่วนตัว

น่าสนใจ

  • โปรแกรมเมอร์
  • งานไอที
  • แบบประเมินสุขภาพ
  • Affiliate

สมัครรับข่าวสาร

สมัครรับข่าวสารใหม่ และอัพเดทข้อมูลต่างๆ

© 2017 ProgrammerThailand. All rights reserved. Created by HanumanIT Co., Ltd.

ไม่พลาดการสื่อสารกับเรา

Programmer Thailand
ปิด