ในบทความนี้เราจะมาเรียนรู้การวนลูปแสดงข้อมูลในลักษณะ List ซึ่ง Vue ก็มีเครื่องมือมาให้เราใช้งานได้อย่างง่ายดาย ก็คือ v-for มันสามารถใช้งานได้ทั้ง Array และ Object มาดูตัวอย่างแรกกันเลย
Template:
<ul id="example-1">
<li v-for="item in items">
{{ item.message }}
</li>
</ul>
Data:
data: {
items: [
{ message: 'Foo' },
{ message: 'Bar' }
]
}
จะได้ผลลัพธ์
ในตัวอย่างเราจะใช้ v-for=“item in items” ลูปแสดงผลข้อมูลที่อยู่ใน items ได้เลย นอกจากนี้เรายังสามารถดึงค่า index ของข้อมูลในแต่ละ item ออกมาได้โดยเขียนตามตัวอย่างนี้ Template:
<ul id="example-2">
<li v-for="(item, index) in items">
{{ parentMessage }} - {{ index }} - {{ item.message }}
</li>
</ul>
Data:
data: {
parentMessage: 'Parent',
items: [
{ message: 'Foo' },
{ message: 'Bar' }
]
}
ผลลัพธ์
v-for สามารถใช่กับ Object ได้ด้วยเหมือนกัน โดยมีรูปแบบการใช้งานดังตัวอย่างนี้ Template:
<ul id="v-for-object" class="demo">
<li v-for="value in object">
{{ value }}
</li>
</ul>
Data:
data: {
object: {
firstName: 'John',
lastName: 'Doe',
age: 30
}
}
ผลลัพธ์
และยังสามารถดึงข้อมูลของ Key ในแต่ละ item ออกมาได้อีกด้วย ดังตัวอย่าง
<div v-for="(value, key) in object">
{{ key }}: {{ value }}
</div>
หรือ Index ของแต่ละ key ก็ยังสามารถดึงออกมาได้ ตามนตัวอย่างนี้
<div v-for="(value, key, index) in object">
{{ index }}. {{ key }}: {{ value }}
</div>
เมื่อคุณใช้งาน v-for แล้วเมื่อข้อมูลมีการเปลี่ยนแปลงลําดับใหม่ v-for จะใช้การแทนที่ของข้อมูลแทนการย้าย Dom อาจทําให้ข้อมูลอาจจะแสดงผิดพลาด เช่นข้อมูลแสดงซํ้า สิ่งที่ควรทําคือการกําหนด Key ที่ไม่ซํ้ากัน ให้กับ HTML ในแต่ละ Item เพื่อให้ Vue แยกแยะแต่ละ node ได้ มาดูตัวอย่างการใช้ Key กันครับ
<div v-for="item in items" :key="item.id">
<!-- content -->
</div>
ในกรณีที่ใช้ v-for กับ Array เราจะมาดูกันว่า การเปลี่ยนแปลงใดบ้างที่จะทําให้ v-for Render Component บ้าง
v-for จะไม่ Render component ใหม่ในกรณีดังต่อไปนี้
ตามตัวอย่างนี้
var vm = new Vue({
data: {
items: ['a', 'b', 'c']
}
})
vm.items[1] = 'x' // is NOT reactive
vm.items.length = 2 // is NOT reactive
แต่เราสามารถทําแบบนี้เพื่อให้ข้อมูลอัพเดทได้
// Vue.set
Vue.set(vm.items, indexOfItem, newValue)
หรือ
// Array.prototype.splice
this.items.splice(indexOfItem, 1, newValue)
หรือ
this.$set(this.items, indexOfItem, newValue)
หรือเปลี่ยนขนาดได้โดย
this.items.splice(newLength)
ในส่วนของ Object Vue จะไม่ Detect ในกรณีที่เราเพิ่ม Key ของ Object เข้าไปตรงๆ ตามตัวอย่างนี้
var vm = new Vue({
data: {
a: 1
}
})
// `vm.a` is now reactive
vm.b = 2
// `vm.b` is NOT reactive
แต่เรายังสามารถเพิ่มได้ด้วยการใช้ set ตามตัวอย่างนี้
var vm = new Vue({
data: {
userProfile: {
name: 'Anika'
}
}
})
Vue.set(vm.userProfile, 'age', 27)
หรือ
this.$set(this.userProfile, 'age', 27)
ในบางครั้งเราต้องการแสดงผลของ List แบบเรียงลําดับ หรือมีการ Filter ข้อมูล แต่ไม่ต้องการเปลี่ยน Original Data เราสามารถใช้ Computed มาช่วยได้ตามตัวอย่างนี้ Template:
<li v-for="n in evenNumbers">{{ n }}</li>
script:
data: {
numbers: [ 1, 2, 3, 4, 5 ]
},
computed: {
evenNumbers: function () {
return this.numbers.filter(function (number) {
return number % 2 === 0
})
}
}
เราสามารถกําหนดจํานวนการวนลูปแบบนี้ได้ครับ
<div>
<span v-for="n in 10">{{ n }} </span>
</div>
ผลลัพธ์
ถ้าในบางกรณีที่เราต้องการแสดงแค่บาง item เท่านั้น เราสามารถใส่เงื่อนไขเข้าไปได้เช่น
<li v-for="todo in todos" v-if="!todo.isComplete">
{{ todo }}
</li>
มาถึงตอนนี้เราสามารถใช้งาน v-for ในรูแปบต่างๆกันไปแล้ว ทั้งในเรื่องของการใช้ v-for กับ Array หรือใช้ กับ Object และเงื่อนไขของการ Update ในแบบต่างๆ หวังว่าเพื่อนๆจะสามารถนําไปประยุกต์ใช้งานได้ไม่ยากครับ
สวัสดีครับ ในบทความนี้ผมจะสอนวิธีการติดตั้ง windows 10 บน raspberry pi2 โดยผมจะแบ่งออกเป็นสองส่วนดังนี้ติดตั้ง Windows 10 IoT Core toolsติดตั้ง Windows 10 IoT Core ลงใน SD Card
การคํานวณหาค่าคามต้านทานในวงจรผสม(ทั้งขนาน และอนุกรมรวมกันในวงจร) นั้นสามารถทําได้โดยยุบวงจรไปทีละส่วนไปเรื่อยๆ จนได้ค่าความต้านทานรวมทั้งหมด ถ้ายังนึกภาพไม่ออก มาดูตามตัวอย่างนี้ได้เลยครับ ตัวอย่าง ถ้าต้องการหาค่าความต้านทานรวม(RT) ของวงจรนี้
ในบทความนี้เป็นเรื่องเกี่ยวกับการออกแบบและคํานวณระบบโซล่าเซลล์ ซึ่งจะหาว่าถ้าเราใช้อุปกณ์ไฟฟ้าเท่านี้เราจะใช้โซล่าเซลล์ เท่าไร แบตเตอรรี่เท่าไร