Categories
VueJS

Belajar Vue JS Bagian 6 : Menggunakan v-bind

hallo coder 😃, setelah dipertemuan sebelumnya kita membahas, Menggunakan v-once dan v-on pada vue js sekarang kita akan membahas Menggunakan v-bind di vue js.

v-bind adalah directive yang ada di vue js, v-bind mempunyai fungsi untuk mem-binding atribut HTML agar nilainya terupdate secara reactive.

Sesuai dengan data yang dinginkan. misalnya perubahan gambar, perubahan class pada suatu tag, perubahan style pada suatu tag.

Contohnya :

<!DOCTYPE html>
<html>

<head>
    <title>Belajar Vue</title>
    <script src="lib/vue.min.js"></script>
    <style>
        .active {
            color: brown
        }
    </style>
</head>

<body>
    <div id="app">
        <h1 v-bind:class="{ active: isActive }">Test</h1>
    </div>
    <script type="text/javascript">
        var vm = new Vue({
            el: '#app',
            data: {
                isActive: false
            }
        })
        setTimeout(() => {
            vm.isActive = true
        }, 3000);
    </script>
</body>

</html>

Pada contoh diatas, kita mem-biding suatu class pada tag h1, sehingga nilai class pada h1 menggikuti isActive,  lihat disini

setTimeout(() => {
            vm.isActive = true
        }, 3000);

ini berfungsi untuk merubah isActive menjadi true dalam waktu 3 detik. jadi warna dari h1 akan berubah menjadi merah.

ini dapat di pakai untuk anda yang sedang membuat aplikasi yang menginginkan perbuhan data yang realtime.

kita juga dapat mem-biding dengan dua variable sekaligus dengan menggunakan [ ] (kurung siku). contohnya seperti ini

<h1 v-bind:class="[class1, class2]"></h1>

selain class, kita juga dapat mem-biding style contohnya seperti berikut ini.

 <h1 v-bind:style="{ color: color }">Test</h1>

Selesai suda tutorial Menggunakan v-bind di vue js, anda dapat kerasikan penggunaan v-bind ini. selamat mencoba sampai ketemu di tutorial Membuat List di Vue Js . salam coder 💻