เรียน Vue.JS ด้วยกัน ตอนที่ 2 / 5

ต่อจากตอนที่แล้วนะครับ คราวๆก่อนเราทำการ bind ค่าแบบง่ายๆ โดยใช้ {{}} คราวนี้เราจะมาลองดู อีก 2 เรื่อง คือ การใช้ v-bind และ condition กับการ loop

1. การใช้งาน v-bind

การใช้งาน v-bind คือการผูกค่าตัวแปรของ vue app กับ attribute ของ tag html ต่างๆ โดยสามารถเป็น tag อะไรก็ได้ ยกตัวอย่างเช่น code html ด้านล่าง

<span v-bind:title="message">
      Hover your mouse over me for a few seconds to see my dynamically bound title!
</span>
<input v-bind:value="textinput"/>

• จะเห้นว่าเราประกาศ v-bind ไปที่ <span> เพื่อทำการ set ค่า title แบบ dynamic ให้กับ tag span นั้นๆ
• และเรายังได้ทำการ v-bind ไปที่ <input> เพื่อ set ค่า value ให้กับ input

โดยที่ตัว javascript จะมี code ดังนี้

          var app2 = new Vue({
              el: '#app-2',
              data: {
                message: 'You loaded this page on ' + new Date(),
                textinput : 'my topwork input'
              }
            })

ผลลัพท์ทีได้คือ เมื่อเรานำ mouse ไป hover ที่ text จะมี dialog ของ title ขึ้นมาดังรูปด้านล่าง

รวมทั้ง input box ของเราจะมีคำว่า ‘my topwork input’ โผล่ขึ้นมา

เท่านี้เราก็สามารถประยุกต์ใช้หลักการนี้ได้กับ tag ทุกอย่างได้เลยครับ

2. condition และการ loop

2.1. Condition with if

เมื่อต้องการจะซ่อนหรือแสดงผลแต่ละ element ถ้าเมื่อก่อนเราก็ใช้ jquery.show กับ .hide แต่ด้วยพลังแห่ง vue เราสามารถกำหนด v-if ใน tag ที่ต้องการจะ show หรือ hide ได้ดังนี้

<div id="app-3">
      <p v-if="seen">Now you see me</p>
      <button onclick="app3.seen = !app3.seen">Toggle</button>
</div>

โดยใช้ Code javascript ด้านล่างในการ bind ค่าตัวแปล

var app3 = new Vue({
        el: '#app-3',
        data: {
           seen: true
        }
})

ผลลัพธ์คือ

เมื่อเรา refresh หน้าจอ ตอนแรกจะมีคำว่า Now you see me ขึ้นมา แต่ว่าเมื่อเราทำการกดปุ่ม “Toggle” จะทำการ switch การแสดงผลการซ่อนเป็นแสดง และจากแสดงเป็นซ่อน

สามารถดุ code ทั้งหมดได้ที่นี่ https://github.com/kchalermsook/vuejs-lesson