เนื้อหาตอนต่อไปนี้เรามาดูพื้นฐานกันต่อเกี่ยวกับการใช้งาน css class
และ css style ร่วมกับ reactive state ของ vuejs เพื่อกำหนดรุปแบบ
การแสดงใน template
การใช้งาน CSS Class ใน template
ในการใช้งาน css class name ซึ่งเป็นส่วนหนึ่งของ attribute ของ html เราก็จะใช้
ร่วมกับ directive ที่ชื่อว่า v-bind โดยใช้เป็น v-bind:class="" และเขียนในรูปแบบย่อ
โดยขึ้นต้นด้วย : แล้วตาม ด้วยชื่อ attribute ที่ต้องการ ซึ่งในกรณีของชื่อ class ก็จะใช้เป็น
:class="" ดูตัวอย่างรูปแบบการใช้งาน
v-bind:class="expression" // หรือ แบบย่อ :class="expression"
โดยค่า expression จะใช้เป็นรูปแบบของ object หรือ array เช่น
// แบบ object
{ active: isActive }
// แบบ array
[activeClass, errorClass]
ดูตัวอย่างการใช้งาน
<script setup>
import { ref, reactive, computed } from 'vue'
const isActive = ref(true)
// ทดสอบเปลี่ยนค่าหลัง 5 วินาที
setTimeout(()=>{
isActive.value = false
},5000)
</script>
<template>
<div :class="{ active: isActive }">Hello World</div>
</template>
<style scoped>
.static {
font-weight: normal;
}
.active {
color:rgb(61, 236, 17);
font-weight: bold;
}
</style>
การกำหนดแบบ Object
เรากำหนด expression ให้กับ class ที่เชื่อมโยงในรูปแบบ object โดย active คือ ชื่อ
ของ css class name ที่เราต้องการกำหนด โดยมีเงื่อนไขผูกกับการเปลี่ยนแปลงของค่า
state ที่ชื่อว่า isActive โดยเมื่อโหลดครั้งแรก มีค่าเป็น true ก็จะทำการเพิ่ม class ให้
กับ template เป็นดังนี้
<div class="active">Hello World</div>
และเมื่อครบ 5 วินาทีเราจำลองให้ค่าเปลี่ยนแปลง โดยมีค่าเป็น false ทำให้ class active
ถูกนำออกจาก dom ก็จะเหลือเป็น
<div class>Hello World</div>
เราสามารถกำหนด class หลายค่าพร้อมกัน ตามเงื่อนไข state ที่ต้องการได้ และยังสามารถ
กำหนด ค่าเริ่มเต้นด้วย html class attribute ปกติได้ เช่น
<script setup>
import { ref, reactive, computed } from 'vue'
const isActive = ref(true)
const hasError = ref(false)
// ทดสอบเปลี่ยนค่าหลัง 5 วินาที
setTimeout(()=>{
isActive.value = false
hasError.value = true
},5000)
</script>
<template>
<div class="static"
:class="{ active: isActive, 'text-danger': hasError }">
Hello World</div>
</template>
<style scoped>
.static {
font-weight: normal;
}
.active {
color:rgb(61, 236, 17);
font-weight: bold;
}
.text-danger{
color:red;
}
</style>
สังเกตว่าเรากำหนด class เริ่มต้นไว้ก่อนด้วยรูปแบบการใช้งานปกติ
นี่คือผลลัพธ์ที่ได้ เมื่อโหลดครั้งแรก ก่อนการเปลี่ยนแปลงค่า static คือ class ที่เรากำหนด
เริ่มต้นแบบตายตัวเข้าไป ในขณะที่ active ถูกเพิ่มจากค่า isActive ที่เป็น true ในขณะที่
text-danger จะไม่ถูกเพิ่มตอนโหลด เพราะค่าเริ่มต้นจาก hasError เป็น false
<div class="static active"> Hello World</div>
และเมื่อผ่านไป 5 วินาทีผลลัพธ์ทีได้ จากการเปลี่ยนแปลงของค่า state ก็จะได้เป็น
<div class="static text-danger"> Hello World</div>
อย่างไรก็ดี หากรูปแบบของ expression ที่กำหนดให้กับ class มีความซับซ้อนมากขึ้น
เราอาจจำเป็นต้องใช้รูปแบบ object ที่ซับซ้อนแทน โดยใช้งานฟังก์ชั่น reactive() ดังนี้
<script setup>
import { ref, reactive, computed } from 'vue'
const isActive = ref(true)
const hasError = ref(false)
const classObject = reactive({
static: true,
active: isActive,
'text-danger': hasError
})
// ทดสอบเปลี่ยนค่าหลัง 5 วินาที
setTimeout(()=>{
isActive.value = false
hasError.value = true
},5000)
</script>
<template>
<div :class="classObject">Hello World</div>
</template>
<style scoped>
.static {
font-weight: normal;
}
.active {
color:rgb(61, 236, 17);
font-weight: bold;
}
.text-danger{
color:red;
}
</style>
จะเห็นว่ารูปแบบนี้โค้ดเราดูสะอาดขึ้น ไม่รกเกินไป ทำให้จัดการได้ง่าย สำหรับ class ที่เราต้องการ
กำหนดให้ใช้งานตายตัว ก็กำหนดค่าเป็น true เข้าไปได้เลย ในขณะที่ค่าอื่นอยากให้ขึ้นกับ state
ที่กำหนด ก็สามารถกำหนดชื่อ state ที่ต้องการเข้าไปได้ โดยไม่ต้องมี .value ต่อท้าย
นอกจากนี้เรายังสามารถใช้ฟังก์ชั่น computed() สำหรับสร้าง state ให้กับ expression ของ
class ได้ ซึ่งข้อดีก็คือช่วยในเรื่องของการแคชได้ ดูตัวอย่างด้านล่าง
<script setup>
import { ref, reactive, computed } from 'vue'
const isActive = ref(true)
const error = ref(null)
const classObject = computed(() => ({
static: true,
active: isActive.value && !error.value,
'text-danger': error.value && error.value.type === 'fatal'
}))
// ทดสอบเปลี่ยนค่าหลัง 5 วินาที
setTimeout(()=>{
isActive.value = false
error.value = true
},5000)
</script>
<template>
<div :class="classObject">Hello World</div>
</template>
<style scoped>
.static {
font-weight: normal;
}
.active {
color:rgb(61, 236, 17);
font-weight: bold;
}
.text-danger{
color:red;
}
</style>
ในตัวอย่าง เราเปลี่ยนตัวแปร เป็น error เข้ามาและให้ค่าเริ่มต้นเป็น null เพื่อทดสอบการกำหนด
เงื่อนไขในการคำนวณให้มีความแตกต่างหลากหลายเพิ่มขึ้น ตัว static มีการแสดงเป็นค่าเริ่มต้น
เหมือนเดิม ในขณะที่ active จะมีการตรวจสอบเงื่อนไขเพิ่มเติม คือ ต้องมีค่าเป็นจริงและตัว error
ต้องไม่มีค่า ซึ่งในการโหลดครั้งแรก error เป็น null ไม่มีค่า จึงเข้าเงื่อนไข แสดงผลเป็นดังนี้
<div class="static active">Hello World</div>
แต่เมื่อครบ 5 วินาที เราจำลองการเปลี่ยนค่า แต่ตอนี้ ค่า error ไม่เป้นไปตามเงื่อนไข ซึ่งเงื่อนไข
คือ error ต้องมีค่า และเป็นชนิดข้อมูลแบบ 'fatal' แต่ในการทดสอบ เรากำหนดให้เป็นค่า true
ดังนั้นจึงไม่เข้าเงื่อนไข ผลลัพธ์สุดท้ายจึงเป็นดังนี้
<div class="static">Hello World</div>
การกำหนดแบบ Array
การใช้รูปแบบ array จะเป็นการกำหนด state ที่เป็นชื่อเข้าไปใน expression ในรูปแบบของ
array โดยใช้ [] ปีกกาสี่เหลี่ยม ดูโค้ดตัวอย่างด้านล่างประกอบ
<script setup>
import { ref, reactive, computed } from 'vue'
const currentClass = ref('active')
const errorClass = ref('text-danger')
// ทดสอบเปลี่ยนค่าหลัง 5 วินาที
setTimeout(()=>{
currentClass.value = 'static'
},5000)
</script>
<template>
<div :class="[currentClass, errorClass]">Hello World</div>
</template>
<style scoped>
.static {
font-weight: normal;
}
.active {
font-weight: bold;
}
.text-danger{
color:red;
}
</style>
จะเห็นว่า เราจะใช้สำหรับ รูปแบบ array กำหนดค่า โดยใช้ชื่อ class ที่ต้องการเป้นค่าของ state
เริ่มต้นกำหนด class ที่ต้องการผ่าน state เข้าไปใน expression ของ class ทำให้ค่าเริ่มต้น
เมื่อโหลดจะได้ผลลัพธ์ เป็น
<div class="active text-danger">Hello World</div>
และหลัง 5 วินาที เราจำลองเปลี่ยนค่า currentClass ให้เป็น static ผลลัพธ์ที่ได้ก็จะเป็น
<div class="static text-danger">Hello World</div>
อย่างไรก็ดีวิธีนี้ไม่ค่อยยืดหยุ่นมากนัก และถ้ามีจำนวนที่ต้องการกำหนดมาก ก็จะทำให้ template
ดูไม่สะอาดและรกเกินไป ดังนั้นวิธีแรกถือเป็นวิธีที่เหมาะสำหรับใช้งานทั่วไป
การใช้งาน CSS Inline Style ใน template
ลำดับความสำคัญของการกำหนด style ให้กับ html จะเรียกตามลำดับดังนี้ คือ
1. การกำหนด !important ต่อหลังจาก css property จะทำให้ค่านั้นสำคัญสุด และเหนือ
กว่าค่าที่กำหนดแบบ inline style
.example {
color: blue !important;
}
2. การกำหนดแบบ inline style ถือว่ามีความสำคัญลำดับรองลงมาจาก ข้อแรก โดยจะมีค่า
เหนือกว่าการกำหนด ด้วย css class และ ids
<div style="color: red;">This text will be red</div>
3. การกำหนด css class และ ids เป็นค่าที่สำคัญรองจาก แบบ 2 ข้องแรก แต่จะยังเป็นค่าที่สูง
กว่าแบบกำหนดด้วย tag selector
.example {
color: green;
}
#specific-element {
color: yellow;
}
4. แบบ Element Selectors จะเป็นแบบที่สำคัญน้อยสุด หรือเป็นค่าอาจจะถูกแทนที่ด้วยค่าที่
สำคัญหรือสูงกว่าตาม 3 ข้อด้านบน
div {
color: black;
}
การกำหนด inline style ใน template ของ vuejs จะใช้รูปแบบ v-bind:style="" หรือแบบ
ย่อเป็น :style โดยจะใช้ค่า expression เป็น JavaScript Object ที่ใช้ชื่อสอดคล้องกับ style
property ของ html ดังนี้
<script setup>
import { ref, reactive, computed } from 'vue'
const activeColor = ref('red')
const fontSize = ref(30)
</script>
<template>
<div :style="{ color: activeColor, fontSize: fontSize + 'px' }">
Hello World</div>
</template>
ผลลัพธ์ที่ได้
<div style="color: red; font-size: 30px;"> Hello World</div>
ในการกำหนดชื่อของ style property เราสามารถใช้ได้ทั้งรูปแบบ JavaScript Object
หรือจะใช้แบบ css style ก็ได้ เช่น fontSize หรือ 'font-size'
และเราควรใช้เป็นแบบ reactive state ด้วยฟังก์ชั่น reactive() หากมีการกำหนดที่ซับซ้อน
เพื่อให้โค้ดสวยไม่รกเกินไป และจัดการได้ง่าย
<script setup>
import { ref, reactive, computed } from 'vue'
const activeColor = ref('red')
const fontSize = ref('30px')
const styleObject = reactive({
color: activeColor,
fontSize: fontSize
})
</script>
<template>
<div :style="styleObject">
Hello World</div>
</template>
หรือถ้าอาจจำเป็นต้องมีการคำนวณก็อาจจะใช้เป็นแบบ computed property ได้เช่น
<script setup>
import { ref, reactive, computed } from 'vue'
const activeColor = ref('red')
const fontSize = ref(30)
const styleObject = computed(() => ({
color: activeColor.value,
fontSize: fontSize.value+'px'
}))
</script>
<template>
<div :style="styleObject">
Hello World</div>
</template>
การกำหนด Inline Style แบบ Array
เราสามารถใช้รูปแบบ array ในการกำหนด inline style ได้ดังนี้
<script setup>
import { ref, reactive, computed } from 'vue'
const activeColor = ref('red')
const fontSize = ref(30)
const styleObject = computed(() => ({
color: activeColor.value,
fontSize: fontSize.value+'px'
}))
const overridingStyles = reactive({
fontWeight:'bold'
})
</script>
<template>
<div :style="[styleObject, overridingStyles]">
Hello World</div>
</template>
โดยจะเป็นการนำเอา object ของแต่ละ style มาเขียนรวมกับไว้ใน [] ปีกาสี่เหลี่ยมในรูปแบบ
array ผลลัพธ์ที่ได้จะเป็นดังนี้
<div style="color: red; font-size: 30px; font-weight: bold;"> Hello World</div>
เนื้อหาพื้นฐานเกี่ยวกับ template ในตอนนี้ก็จะประมาณนี้ ตอนหน้าจะเป็นอะไรรอติดตาม
อ่านต่อที่บทความ
เนื้อหาที่เกี่ยวข้อง