WEEK 5 - Vue JS Part 1 Basic of VueJS Ex 2

ข้อ 1 ประกาศตัวแปรและแสดงค่าของตัวแปรในรูปแบบ Declarative Rendering ดังภาพด้านล่าง


วิธีทำ:

  1. เปิดไฟล์ ex1/ex1.js และประกาศ Vue instance พร้อมทั้งสร้าง option data และกำหนดค่า สำหรับตัวแปร
    • student_id
    • student_fname
    • student_lname
  2. เปิดไฟล์ ex1/index.html เพื่อทำการ render ค่าตัวแปรทั้ง 3 ตัว ลงใน<div id="ex1">
  3. ลองทดสอบแก้ไขค่าตัวแปรใน console

{{student_id}} {{student_fname}} {{student_lname}}

ข้อ 2 มีรูปภาพของตัวเลขแบบ 7-Segment โดยเป็นรูปของตัวเลขตั้งแต่ 0-5 รวมทั้งหมด 6 รูป และมีตัวแปร number_runner โดยจะเปลี่ยนค่าเรียงตั้งแต่ 0-6 ทุก ๆ 1 วินาที ให้นักศึกษาแสดงรูปภาพของตัวเลข 7-Segment ให้ตรงกับค่าของ number_runner
*** กำหนดให้ใช้ v-show ***

วิธีทำ: เปิดไฟล์นี้ในโปรแกรม vscode และแก้ไข code ใน <div id="ex2">

number_runner = {{number_runner}}

ข้อ 3 ใช้ตัวแปร number_runner กำหนดเงื่อนไขของปุ่มที่จะแสดง

  • number_runner เป็นเลขคู่ ให้แสดงปุ่มสีเขียว
  • number_runner เป็นเลขคี่ ให้แสดงปุ่มสีแดง
  • number_runner เป็นเลข 0 ให้แสดงปุ่มสีฟ้า

    • *** กำหนดให้ใช้ v-if ***

    วิธีทำ: เปิดไฟล์นี้ในโปรแกรม vscode และแก้ไข code ใน <div id="ex3">


    number_runner = {{number_runner}}
    Odd Number Even Number Zero Number

    ข้อ 4 แสดงผล Array ชื่อว่า monthsในรูปแบบ List (ใช้ HTML tag UL)

    วิธีทำ: เปิดไฟล์นี้ในโปรแกรม vscode และแก้ไข code ใน <div id="ex4"> (Array months ดูได้ในไฟล์ ex1/ex2-7.js)

    ข้อ 5 มีตัวแปร counter กับปุ่มบวก และปุ่มลบค่า ลองกดดูแล้วค่ามันยังไม่เปลี่ยนเลย ให้นักศึกษาทำให้ปุ่มสามารถเพิ่มลดค่าได้ โดยเมื่อคลิกปุ่มเครื่องหมายลบ (-) ค่า counter จะลดลง 1 ค่า และเมื่อคลิกปุ่มเครื่องหมายบวก (+) ค่า counter จะเพิ่มขึ้น 1 ค่า

    วิธีทำ: เปิดไฟล์นี้ในโปรแกรม vscode และแก้ไข code ใน <div id="ex5"> (ตัวแปร counter ดูได้ในไฟล์ ex1/ex2-7.js)

    - {{counter}} +

    ข้อ 6 มี Dropdown ของ Bulma สวย ๆ มาให้อันนึง แต่ว่าเมื่อลองนำโค้ดมาใส่แล้วพบว่ามันแสดง Dropdown มาให้เองโดยที่ยังไม่ได้กดเลย หน้าที่ของนักศึกษาคือทำให้ Dropdown ทำงานได้ คือเมื่อกดหนึ่งครั้งก็จะแสดง Dropdown และเมื่อกดอีกครั้งก็จะปิด Dropdown โดยข้อมูลใน Dropdown คือ List ของวันในสัปดาห์ โดยใช้ข้อมูลจาก months

    วิธีทำ: เปิดไฟล์นี้ในโปรแกรม vscode และแก้ไข code ใน <div id="ex6"> (Array months ดูได้ในไฟล์ ex1/ex2-7.js)

    ข้อ 7 มี Array ชื่อว่า week โดยเป็น Array ของ Object ของแต่ละวันในหนึ่งสัปดาห์ โดยแต่ละวันจะประกอบไปด้วย title คือชื่อของวัน และ color คือสีของวัน หน้าที่ของนักศึกษาคือให้แสดงtitleวัน เรียงกันเป็น List (ใช้ HTML tag UL) และใส่ style สีตัวอักษรของแต่ละวันตามcolorของแต่ละวัน

    วิธีทำ: เปิดไฟล์นี้ในโปรแกรม vscode และแก้ไข code ใน <div id="ex7"> (Array week ดูได้ในไฟล์ ex1/ex2-7.js)