by Anggie Bratadinata

Mengenal VueJS – 03

Salah satu fungsi data-binding yang banyak dipake adalah untuk ngerubah stylesheet, bisa yang inline atau pake class. Di bagian ke-3 seri tutorial pengenalan VueJS ini, saya mau bahas tentang CSS dinamis.

Style Binding

Kita pake v-bind:style untuk ngerubah nilai atribut style.

See the Pen VueJS – Dynamic CSS – style binding by Anggie Bratadinata (@masputih) on CodePen.

Ganti warna kotak pake text-input di bawahnya.

Properti CSS yang mau kita ubah bisa ditulis dalam bentuk, 'nama-properti' (pake tanda kutip tunggal) atau namaProperti. Jadi dua cara di bawah ini bisa dipake:

//pake ini
v-bind:style="{backgroundColor:color}"
//atau ini
v-bind:style="{'background-color':color}"

Class Binding

Untuk styling sederhana, style-binding di atas mungkin udah cukup. Tapi untuk kasus yang lebih rumit, class-binding lebih enak dipake.

Sintaks dasarnya kayak di bawah ini. Kelas CSS hanya ditempelin ke elemen kalo kondisinya bernilai true.

v-bind:class="{ nama_class: kondisi }"

Jadi kalo kita punya kelas .error yang hanya kita pake kalo kondisi error, kita bisa tulis:

v-bind:class="{error:isError}"

Contohnya begini:

See the Pen VueJS – Dynamic CSS – class binding 01 by Anggie Bratadinata (@masputih) on CodePen.

Coba ganti status lewat text-input jadi “error” / “success” (tanpa tanda kutip).

Kelas .error hanya dipasang ke elemen <p> kalo nilai balik isError adalah true. Kelas .success juga tergantung nilai balik isSuccess.

Object

Alih-alih nulis objek {a:isA,b:isB } langsung di atribut class/style-binding, kita bisa juga pake objek dari data model / computed-property. Ini berguna terutama kalo styling-nya panjang, kombinasi beberapa kelas.

See the Pen VueJS – Dynamic CSS – class binding 02 by Anggie Bratadinata (@masputih) on CodePen.

Array

Selain pake sintaks objek, kita juga bisa pake array. Kalo pake sintaks objek ada mapping antara setiap kelas dengan kondisional/syarat yang harus bernilai true, kalo pake array nggak perlu. Jadi bisa dipake untuk kelas yang semi-statis, tetep ditempelin ke satu elemen, tanpa syarat, nggak tergantung kondisi tertentu.

<p v-bind:class="showThumb">
  <!-- binding pake array -->
  <i v-bind:class="['fa','fa-thumbs-up']"></i>
  {{ status }}
</p>

Kita bisa kombinasi sintaks objek & array untuk binding kelas semi-statis & dinamis.

See the Pen VueJS – Dynamic CSS – class binding 03 by Anggie Bratadinata (@masputih) on CodePen.

Dalam contoh di atas, kelas .fa nggak tergantung kondisi tertentu tapi kelas di belakangnya bisa kelas .fa-thumbs-up atau .fa-star tergantung nilai app.like.

Jadi itu sedikit tentang CSS dinamis. Mudah-mudahan bermanfaat. Silakan coba-coba sendiri pake contoh kode di Codepen.

Also in this category ...