Cara Menggunakan Dynamic Classes Pada Vue Js

Pada artikel sebelumya saya telah membahas tentang Memahami Data Binding Pada Vue Js dan sekarang kita akan membahas masih dengan tema vue js yaitu membahas Cara Menggunakan Dynamic Classes Pada Vue Js .

Apa sih yang di maksud dengan Dynamic Classes Pada Vue Js sebenarnya dynaic class ini bukan fungsi bawaan yang ada pada framework vuw js itu sendiri, melainkan lebih ke pemanfaatan beberapa fitur dari framework vue js untuk mencapai suatu fungsi yang di sebut Dynamic Classes Pada Vue Js. Yang di maksud dengan dynamic class itu adalah sebuah fungsi untuk mengganti class pada DOM html dengac cara dinamis tanpa harus merubah code HTML nya itu sendiri.

Untuk membuat fungsi tersebut biasanya menggunakan event pada vue js dan pada contoh kali ini kita akan memanfaatkan event v-on:click untuk membuat fungsi dynakic class, Oke kita langsung pada contoh programnya :

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <link rel="stylesheet" href="style.css">
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script@>
</head>
<body>
    <div id="vue-app">
       <h1>Dnamic css</h1>
       <h2>Example 1</h2>
       <div v-on:click="available = !available"  v-bind:class="{available: available}">
           <span>Bayu</span>
       </div>
       <h2>Example 2</h2>

       <button v-on:click="available = !available">Togle Available</button>
       <button v-on:click="nearby = !nearby">Togle Nearby</button>
       <div  v-bind:class="compClass">
        <span>Bayu</span>
    </div>
       
    </div>


    
    <script src="app.js"></script@>
</body>
</html>

Dan ini merupakan CSS nya :

span {
    background: red;
    display: inline-block;
    padding: 10px;
    color: #fff;
    margin: 10px 0;
}

.available span {
    background: green;
}

.nearby span:after {
    content: "nearby";
    margin-left: 10px;
}

Dan ini script vue js nya :

// Dynamic css classes
const vue = new Vue({
  el: '#vue-app',
  data: {
    available: false,
    nearby: false

  },
  computed: {
    compClass: function() {
      return {
        available: this.available,
        nearby: this.nearby
      }
    }
  },
});

Silahkan teman-teman jalankan program di atas dan perhatikan hasilnya, Karena hasilnya merupakan perubahan yang dinamis maka saya tidak melampirkan hasilnya pada artikel ini, kalau teman-teman berhasil maka teman-teman akan tahu sendiri maksud dari dynamic classes pada vuw js.

Oke seperti itu lah teman-teman untuk Cara Menggunakan Dynamic Classes Pada Vue Js dan sampai bertemu lagi pada artikel selanjutnya.

Cara Menggunakan Dynamic Classes Pada Vue Js

Kategori