Mengatur Class dan Style Secara Dinamis di Vue.js

Salah satu kekuatan utama dari Vue.js adalah kemampuannya untuk mengelola dan memanipulasi elemen DOM secara reaktif. Dalam pengembangan antarmuka pengguna, sering kali kita membutuhkan penyesuaian tampilan berdasarkan kondisi tertentu—misalnya, mengganti warna latar belakang ketika tombol diklik, atau menambahkan efek tertentu saat elemen dalam keadaan aktif. Vue.js menyediakan cara yang efisien dan intuitif untuk mengatur class dan style secara dinamis menggunakan binding.

Dalam artikel ini, kita akan membahas berbagai cara untuk mengelola class dan style secara dinamis di Vue.js, termasuk penggunaan objek, array, computed properties, dan inline styles. Kita juga akan melihat studi kasus singkat untuk memperkuat pemahaman.

1. Pengenalan `v-bind:class` dan `v-bind:style`

Vue.js memungkinkan kita untuk memanipulasi atribut HTML menggunakan binding. Salah satu binding yang sering digunakan adalah v-bind:class dan v-bind:style.

v-bind:class: Mengikat nilai ke atribut class.
v-bind:style: Mengikat nilai ke atribut style dalam format JavaScript.

Kedua directive ini mendukung penulisan dalam bentuk objek, array, maupun computed properties.

2. Binding Class Menggunakan Objek

Binding menggunakan objek sangat berguna ketika kita ingin mengatur class berdasarkan kondisi boolean. Format umumnya adalah:

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

Jika isActive = true dan hasError = false, maka hasil akhirnya adalah:

<div class="active"></div>

Kode di atas mudah dibaca dan sangat ekspresif, cocok untuk kasus di mana class ditentukan secara kondisional.

Contoh lengkap:

<template>
  <div :class="classObject">Contoh teks</div>
</template>

<script>
export default {
  data() {
    return {
      isActive: true,
      hasError: false
    }
  },
  computed: {
    classObject() {
      return {
        active: this.isActive,
        'text-danger': this.hasError
      }
    }
  }
}
</script>

3. Binding Class Menggunakan Array

Array digunakan ketika Anda ingin menambahkan beberapa class secara statis dan dinamis dalam satu atribut.

<div :class="[activeClass, errorClass]"></div>

Contoh dengan data:

<template>
  <div :class="[isActive ? 'active' : '', hasError ? 'text-danger' : '']">
    Teks dengan class dinamis
  </div>
</template>

<script>
export default {
  data() {
    return {
      isActive: true,
      hasError: false
    }
  }
}
</script>

Penggunaan array sangat bermanfaat ketika kombinasi class tidak bergantung pada objek boolean, melainkan string yang berubah-ubah.

4. Dynamic Style Binding

Selain class, Vue.js juga mendukung binding untuk style inline.

Format objek:

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

Contoh lengkap:

<template>
  <div :style="styleObject">Teks dengan gaya dinamis</div>
</template>

<script>
export default {
  data() {
    return {
      activeColor: 'blue',
      fontSize: 16
    }
  },
  computed: {
    styleObject() {
      return {
        color: this.activeColor,
        fontSize: this.fontSize + 'px'
      }
    }
  }
}
</script>

Format array:

vueCopyEdit<div :style="[baseStyles, overrideStyles]"></div>

Ini memungkinkan Anda untuk menggabungkan beberapa objek gaya yang mungkin berasal dari berbagai sumber.

5. Tombol Dinamis

Bayangkan Anda memiliki tombol yang berubah warna ketika diklik, dan menjadi disabled jika kondisi tertentu terpenuhi. Berikut contoh implementasinya:

<template>
  <button
    :class="['btn', { 'btn-primary': isActive, 'btn-secondary': !isActive }]"
    :style="{ opacity: isDisabled ? 0.5 : 1 }"
    :disabled="isDisabled"
    @click="toggleState"
  >
    {{ isActive ? 'Aktif' : 'Tidak Aktif' }}
  </button>
</template>

<script>
export default {
  data() {
    return {
      isActive: false,
      isDisabled: false
    }
  },
  methods: {
    toggleState() {
      if (!this.isDisabled) {
        this.isActive = !this.isActive
      }
    }
  }
}
</script>

Dengan pendekatan ini, Anda bisa mengontrol tampilan dan interaksi komponen dengan cara yang sangat fleksibel dan intuitif.

6. Tips dan Best Practices

Gunakan computed properties untuk logika class atau style yang kompleks agar kode lebih bersih.
Hindari penulisan class atau style inline dalam template jika bisa dihitung di luar — hal ini meningkatkan keterbacaan dan kemudahan perawatan.
Gunakan array untuk class atau style yang bersifat kombinatif, seperti hasil dari fungsi atau properti string.
Pertimbangkan CSS modules atau scoped CSS jika Anda ingin isolasi styling antar komponen.

Vue.js memberikan alat yang sangat kuat dan fleksibel untuk mengatur class dan style secara dinamis. Dengan memahami berbagai cara binding dan bagaimana menggunakannya secara efektif, Anda dapat membangun antarmuka pengguna yang responsif, adaptif, dan mudah dikelola. Mengatur gaya tidak hanya tentang estetika, tapi juga bagaimana Anda menciptakan pengalaman pengguna yang sesuai konteks dan mudah dipahami.

Categories:Vue Js