Catatan Belajar Vue : Binding HTML Attribut

Hal umum yang cukup sering digunakan dalam data binding adalah manipulasi atribut seperti class misalnya. Untuk lebih jelasnya mari coba siapkan dahulu satu struktur HTML. Oh iya ini masih pake CDN yah karena masih dalam kelompok pengenalan di minggu pertama.

<!DOCTYPE html>
<html lang="en">
  <head>
    <title>Data Binding</title>
    <script src="https://vuejs.org/js/vue.min.js"></script>
    <style>
      .red {
        background-color: red;
      }
    </style>
  </head>
  <body>
    <div id="app">

    </div>
  </body>
  <script>
   new Vue({
      el: '#app',
      data: {

      }
     })
  </script>
</html>

Tujuan dari percobaan yang pertama adalah mengeluarkan class yang di-render dari properti si Vue. Tambahkan beberapa script di HTML menjadi seperti berikut.

<!DOCTYPE html>
<html lang="en">
  <head>
    <title>Data Binding</title>
    <script src="https://vuejs.org/js/vue.min.js"></script>
    <style>
      .red {
        background-color: red;
      }
    </style>
  </head>
  <body>
    <div id="app">
    <!-- Langsung print CSS class dari properti cssClass-->
  <div v-bind:class="cssClass" style="width:250px;">
    Konten Blok Inline Css
  </div>
    </div>
  </body>
  <script>
   new Vue({
      el: '#app',
      data: {
        cssClass: "red"
      }
     })
  </script>
</html>

Perhatikan script di atas, saya tambahkan atribut baru bawaan Vue ke dalam struktur HTML yaitu v-bind:class yang memanggil langsung properti cssClass yang sudah disediakan. Hasilnya bisa dilihat pada GIF berikut.

Mungkin kepikiran ribet amat sih perlu di-binding dari properti Vue padahal cuma nambahin class doang. Oke, pada contoh yang kedua ini akan menggunakan pengkondisian sederhana. Mari lihat struktur yang baru.

<!DOCTYPE html>
<html lang="en">
  <head>
    <title>Data Binding</title>
    <script src="https://vuejs.org/js/vue.min.js"></script>
    <style>
      .red {
        background-color: red;
      }
    </style>
  </head>
  <body>
    <div id="app">
    <!-- Class red akan aktif JIKA properti isActive bernilai True-->
      <div v-bind:class="{ red: isActive }" style="width:250px;">
        Konten Blok Active Red
      </div>
    </div>
  </body>
  <script>
   new Vue({
      el: '#app',
      data: {
        isActive: true,
      }
     })
  </script>
</html>

Pada contoh di atas class “red” hanya akan aktif atau di-render jika properti isActive berniliai true. Silahkan ganti nilai isActive jadi false, seharusnya class “red” tidak akan di-render.

Contoh terakhir, ini ada kaitannya dengan tulisan selanjutnya, itung-itung “spoiler” tulisan selanjutnya. Di contoh terakhir ini yaitu saya akan coba real time binding. Struktur yang tadi kita ubah lagi menjadi seperi ini.

<!DOCTYPE html>
<html lang="en">
  <head>
    <title>Data Binding</title>
    <script src="https://vuejs.org/js/vue.min.js"></script>
    <style>
      .red {
        background-color: red;
      }
      .blue {
        background-color: blue;
      }
    </style>
  </head>
  <body>
    <div id="app">

        <!-- Class yang digunakan realtime dari ketikan-->
          <input type="text" v-on:input="cssClass = $event.target.value">
          <div v-bind:class="cssClass" style="width:250px;">
            Konten Blok Real Time
          </div>
    </div>
  </body>
  <script>
   new Vue({
      el: '#app',
      data: {
        cssClass: ""
      }
     })
  </script>
</html>

hasilnya seperti ini :

Untuk yang contoh ketiga ini akan dibahas lebih lanjut pada tulisan selanjutnya.

referensi :

1 ) https://vuejs.org/v2/guide/class-and-style.html#Binding-HTML-Classes

2 ) https://www.youtube.com/watch?v=N198LSY_jTw&index=3&list=PL55RiY5tL51p-YU-Uw90qQH419BM4Iz07