ในตอนที่ 7 นี้จะเกี่ยวกับเรื่อง Class and Style Bindings ใน vue.js ครับ ในการจัดการ Class และ Style เราสามารถใช้ v-bind ได้ เพื่อให้เราสามารถใส่ Logic หรือ ตัวแปรลงไปได้ ทําให้เราสามารถทํา Class  และ Style แบบ Dinamic ได้ง่ายขึ้น

เรามาดูวิธีการใช้งานในรูปแบบต่างๆ โดยผมจะแยกเป็นสองส่วนครับคือ Binding HTML Classes และ Binding Inline Styles ดังนี้ครับ

Binding HTML Classes

Object Syntax คุณสามารถส่งค่า Object ให้กับ Class ได้ตามตัวอย่างนี้

<div v-bind:class="{ active: isActive }"></div>

จากตัวอย่าง isActive เป็นตัวแปรที่เราเก็บค่า true หรือ false ไว้เพื่อ Control class ของ div นี้ได้ตามต้องการ นอกจากนี้เราสามารถใช้ v-bind:class ร่วมกับ Attribute class ปกติได้ ในกรณีที่เราต้องการควบคุม Class เพิ่มเติมนอกเหนือจาก Class เดิมที่มีอยู่ ตัวอย่าง

<div class="static"
     v-bind:class="{ active: isActive, 'text-danger': hasError }">
</div>

isActive, hasError เป็นตัวแปรที่เราสามารถควบคุมได้ตามต้องการ มาดูตัวอย่างการทําไปใช้งานจริงกันครับ

data: {
  isActive: true,
  error: null
},
computed: {
  classObject: function () {
    return {
      active: this.isActive && !this.error,
      'text-danger': this.error && this.error.type === 'fatal'
    }
  }
}

html:

<div v-bind:class="classObject"></div>

Array Syntax เราสามารถส่ง Array เข้าไปใน v-bind:class ได้ ดังนี้ js:

<div v-bind:class="classObject"></div>

html:

data: {
  activeClass: 'active',
  errorClass: 'text-danger'
}

เมื่อ Render ออกมาแล้วจะได้ออกมาแบบนี้ครับ

<div class="active text-danger"></div>

หรือ เราสามารถเพิ่ม Condition เข้าไปได้แบบนี้

<div v-bind:class="[isActive ? activeClass : '', errorClass]"></div>

With Components ในกรณีที่เราใส่ Class ให้กับ Component ที่เราสร้างขึ้นมาเอง Class ที่เรากําหนดนั้นจะถูกกําหนดให้กับ Class ของ Root ด้วย ตัวอย่าง ถ้าเรามี Component ชื่อ my-component โดยมีเนื้อหาดังนี้

<template>
  <p class="foo bar">Hi</p>
</template>

<script>
export default {
  name: 'my-component'
}
</script>

แล้วเรานํา Component ไปใช้งานโดยกําหนด Class ให้กับ Component นั้นด้วย

<my-component class="baz boo"></my-component>

เมื่อ Render ออกมาแล้วจะได้แบบนี้ครับ

<p class="foo bar baz boo">Hi</p>

Binding Inline Styles

Object Syntax เราสามารถส่ง Styles ให้กับ HTML ได้ซึ่งก็จะ คล้ายๆกับ Class โดยใช้ v-bind:style แล้วส่ง Object ของ style ที่เราต้องการเข้าไป ตัวอย่าง

<div v-bind:style="{ color: activeColor, fontSize: fontSize + 'px' }"></div>

ตัวอย่าง data:

data: {
  activeColor: 'red',
  fontSize: 30
}

หรือเราสามารถทําแบบนี้ได้ครับ

<div v-bind:style="styleObject"></div>

สร้าง Data ที่เป็น Object ก็ได้ครับ

data: {
  styleObject: {
    color: 'red',
    fontSize: '13px'
  }
}

Array Syntax ถ้าต้องการใช้ Style หลาย Style ก็สามารถส่งเป็น Array เข้าไปได้ดังนี้

<div v-bind:style="[baseStyles, overridingStyles]"></div>

Auto-prefixing กรณีที่ Style ต้องการใช้  vendor prefixes ใน v-bind:style Vue จะตรวจสอบและ เพิ่มให้โดยอัตโนมัติ ถึงจุดนี้เราสามารถควบคุม Class และ Style ในแบบ Dinamic ได้อย่างง่ายดาย ด้วยการใช้ v-bind:class และ v-bind:style แล้วพบกันบทความหน้านะครับ สวัสดีครับ :)