Binding Class dan Style

Kebutuhan umum untuk binding data adalah memanipulasi daftar elemen class dan style sebarisnya (inline styles). Karena keduanya adalah atribut, kita dapat menggunakan v-bind untuk menanganinya: kita hanya perlu menghitung string terakhir dengan ekspresi kita. Namun, berurusan dengan penggabungan string mengjengkelkan dan rawan kesalahan. Karena alasan ini, Vue menyediakan penyempurnaan khusus ketika v-bind digunakan dengan class dan style. Selain string, ekspresi juga dapat dievaluasi menjadi objek atau array.

Binding Kelas HTML

Sintaksis Objek

Kita bisa melewatkan objek ke :class (kependekan dari v-bind:class) untuk mengubah class secara dinamis:

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

Sintaksis di atas berarti keberadaan class active akan ditentukan oleh nalai truthy (opens new window) properti data isActive.

Anda dapat memiliki beberapa class di-toggle dengan memiliki lebih banyak properti di objek. Selain itu, direktif :class juga bisa berdampingan dengan atribut class biasa. Misalnya templat berikut:

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

Dan data berikut:

data() {
  return {
    isActive: true,
    hasError: false
  }
}

Kode tersebut akan me-render:

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

Ketika isActive atau hasError berubah, daftar class akan diperbarui juga. Misalnya, jika hasError menjaditrue, daftar class akan menjadi "static active text-danger".

Objek yang di-bind tidak harus diletakkan secara sebaris (inline):

<div :class="classObject"></div>

data() {
  return {
    classObject: {
      active: true,
      'text-danger': false
    }
  }
}

Kode tersebut akan memberikan hasil yang sama. Kita juga bisa melakukan binding ke properti terkomputasi yang mengembalikan objek. Cara tersebut adalah pola yang umum dan manjur:

<div :class="classObject"></div>

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

Sintaksis Array

Kita bisa memasukkan array ke dalam :class untuk menerapkan daftar class:

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

data() {
  return {
    isActive: 'active',
    errorClass: 'text-danger'
  }
}

Yang akan me-render:

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

Jika Anda juga ingin mengubah class dalam daftar dengan kondisi tertentu, Anda dapat melakukannya dengan ekspresi ternary:

<div :class="[isActive ? isActive : '', errorClass]"></div>

Kode tersebut akan selalu menerapkan errorClass, dan hanya akan menerapkan isActive jika isActive bernilai truthy[1].

Namun, cara tersebut bisa cukup bertele-tele jika Anda memiliki beberapa class dengan kondisinya masing-masing. Oleh karena itu, memungkinkan juga untuk menggunakan sintaksis objek di dalam sintaksis array:

<div :class="[{ active: isActive }, errorClass]"></div>

Dengan Komponen

Bagian ini mengasumsikan pengetahuan tentang Vue Components. Jangan ragu untuk melewatinya dan kembali lagi nanti.

Saat Anda menggunakan atribut class pada komponen buatan sendiri (custom component) dengan satu elemen root, class tersebut akan ditambahkan ke elemen tersebut. Kelas yang ada pada elemen tersebut tidak akan ditimpa.

Misalnya, jika Anda mendeklarasikan komponen berikut:

const app = Vue.createApp({})

app.component('my-component', {
  template: `<p class="foo bar">Hi!</p>`
})

Kemudian tambahkan beberapa class saat menggunakannya:

<div id="app">
  <my-component class="baz boo"></my-component>
</div>

HTML yang di-render akan menjadi:

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

Hal yang sama berlaku untuk binding class:

<my-component :class="{ active: isActive }"></my-component>

Jika isActive bernilai truthy, HTML yang di-render akan menjadi:

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

Jika komponen Anda memiliki beberapa elemen root, Anda perlu menentukan komponen mana yang akan menerima class ini. Anda juga dapat melakukannya dengan menggunakan properti $attrs pada komponen:

<div id="app">
  <my-component class="baz"></my-component>
</div>

const app = Vue.createApp({})

app.component('my-component', {
  template: `
    <p :class="$attrs.class">Hi!</p>
    <span>This is a child component</span>
  `
})

Anda dapat mempelajari lebih lanjut tentang pewarisan atribut komponen pada bagian Atribut Non-Properti.

Binding Style Sebaris (Inline)

Sintaksos Objek

Sintaksis objek untuk :style cukup mudah - terlihat hampir seperti CSS, kecuali itu adalah objek JavaScript. Anda dapat menggunakan camelCase atau kebab-case (gunakan tanda kutip dengan kebab-case) untuk nama properti CSS:

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

data() {
  return {
    activeColor: 'red',
    fontSize: 30
  }
}

Seringkali cara tersebut adalah cara yang baik untuk me-bind objek style secara langsung agar templatnya lebih bersih:

<div :style="styleObject"></div>

data() {
  return {
    styleObject: {
      activeColor: 'red',
      fontSize: '13px'
    }
  }
}

Sekali lagi, sintaksis objek sering digunakan bersama dengan properti komputasi yang mengembalikan objek.

Sintaksis Array

Sintaksis array untuk :style memungkinkan Anda menerapkan beberapa objek style ke elemen yang sama:

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

Memberi Awalan Secara Otomatis

Saat Anda menggunakan properti CSS yang membutuhkan awalan vendor (opens new window) pada :style, misalnya transform, Vue akan secara otomatis mendeteksi dan tambahkan prefiks yang sesuai ke style yang diterapkan.

Beberapa Nilai

Anda dapat memberikan sebuah array dengan beberapa nilai (awalan) ke properti style, misalnya:

<div :style="{ display: ['-webkit-box', '-ms-flexbox', 'flex'] }"></div>

Kode tersebut hanya akan me-render nilai terakhir dalam array yang didukung peramban. Dalam kasus ini, contoh tersebut akan me-render display: flex untuk peramban yang mendukung versi flexbox yang tidak memiliki awalan.

Catatan penerjemah:

[1] Truthy bukanlah bernilai true, silahkan memembaca Mozilla Developer Network - Truthy (opens new window) untuk penjelasan lebih lanjut.