v-bind adalah Vue directive yang digunakan untuk meng-kaitkan (binding) atribut tag HTML dengan expression dan di saat bersamaan meneruskan data (property di dalam objek Javascript) ke expression yang memiliki nama sama. Serupa v-on, directive ini juga memiliki notasi ringkas / shorthand, contoh : v-bind:class diganti :class atau v-bind:style disingkat menjadi :style.

Attribute Binding dengan v-bind

Jika data binding pada directive v-model berlaku dua arah (dari Vue diteruskan ke HTML dan dari HTML juga bisa diteruskan ke Vue), maka di v-bind data binding hanya berlaku searah (dari Vue ke HTML saja). Agar lebih jelas, buat file latihan005.html lalu copy paste baris kode berikut :

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>Latihan Vue 005</title>
    <style>
        h1 { 
            font-size: 24px;
            font-weight: bold; 
        }
        a {
            text-decoration: none;
        }
        a:hover {
            text-decoration: underline; 
        }
    </style>
</head>
<body>
    <div id="app">

        <h1>Tooltip Attribute Binding</h1>
        <a href="#" onClick="return false;" v-bind:title="tooltip">Arahkan Mouse di Sini</a>

    </div>
    <script src="vue.js"></script>
    <script>
        new Vue ({    
            el: '#app',
            data: {
                tooltip: 'Selamat Datang di Vue.js'
            }
        });
    </script>
</body>
</html>

Pada kode di atas, saya membuat contoh hovering kursor mouse ke elemen hyperlink untuk memunculkan tooltip (tidak perlu di-klik, cukup diarahkan ke hyperlink-nya saja). Atribut title pada tag HTML hyperlink dikaitkan (binding) dengan expression bernama tooltip pada baris kode <a v-bind:title="tooltip">. Sedangkan nilai untuk expression tooltip diperoleh dari property tooltip:'Selamat Datang di Vue.js' di sisi Vue.

Hasil eksekusi file latihan005.html seperti gambar berikut :

attribute, class, style binding pada vue.js dengan v-bind

Seperti yang telah saya sebutkan di atas, directive v-bind memiliki notasi shorthand, sehingga penulisan v-bind:title="tooltip" dapat diringkas menjadi :title="tooltip".

Contoh Class Binding

Setelah mengetahui dasar attribute binding dengan directive v-bind, sekarang saya akan menunjukkan cara melakukan class binding disertai penggunaan directive v-on untuk hovering kursor mouse yang lebih fleksibel, yaitu @mouseover. Untuk keperluan class binding pada contoh ini, saya akan menggunakan notasi @class.

Copy paste baris kode berikut ke file latihan005.html :
.header-black {
    color: black;
}
.header-red {
    color: red;
}
.header-green {
    color: green;
}
.header-orange {
    color: orange;
}

ke baris yang ditandai dengan <!-- SISIPKAN DI SINI -->

    <style>
        h1 { 
            font-size: 24px;
            font-weight: bold; 
        }
        
        <!-- SISIPKAN DI SINI -->

        a {
            text-decoration: none;
        }
        a:hover {
            text-decoration: underline; 
        }
    </style>

lalu kode berikut :

<div>
    <h1 :class="headerClass">Class Binding + MouseOver</h1>
    <a href="#" onClick="return false;" @mouseover="gantiHeaderClass('red')">Header Class Red</a>
    <br/>
    <a href="#" onClick="return false;" @mouseover="gantiHeaderClass('green')">Header Class Green</a>
</div>

ke baris yang ditandai dengan <!-- SISIPKAN DI SINI -->

<body>
    <div id="app">

        <div>
            <h1>Tooltip Attribute Binding</h1>
            <a href="#" onClick="return false;" :title="tooltip">Arahkan Mouse di Sini</a>
        </div>

        <!-- SISIPKAN DI SINI -->

    </div>
    <script src="vue.js"></script>

dan perbarui kode pada blok new Vue ({ }); menjadi seperti berikut :

<script>
    new Vue ({    
        el: '#app',
        data: {
            headerClass: 'header-black',
            tooltip: 'Tooltip dari Vue.js',
        },
        methods: {
            gantiHeaderClass(warna) {
                this.headerClass = 'header-' + warna;
            }
        }
    });
</script>

Pada kode di atas, hovering kursor mouse ke elemen hyperlink dilakukan untuk merubah warna teks header h1. Atribut class pada tag HTML header h1 dikaitkan (binding) dengan expression bernama headerClass pada baris kode <h1 :class="headerClass">. Sedangkan nilai untuk expression headerClass diperoleh dari property headerClass:'header-black' di sisi Vue. Saat aplikasi pertama kali dimuat oleh browser, styling class yang digunakan oleh header h1 adalah header-black, seperti yang dapat dilihat pada deklarasi blok css, class .header-black memiliki property berupa color:black;.

Warna awal color:black; pada teks header h1 dapat diganti ke warna lain dengan menggunakan directive v-on:mouseover di baris kode @mouseover="gantiHeaderClass('red')" dan @mouseover="gantiHeaderClass('green')". Kursor mouse yang diarahkan ke elemen hyperlink akan menjadi trigger diprosesnya method gantiHeaderClass(warna) di sisi Vue. Argumen string bernilai 'red' atau 'green' akan diteruskan ke parameter (warna), menjadi value untuk this.headerClass = 'header-' + warna;.

Hasil eksekusi file latihan005.html setelah perubahan kode di atas dapat dilihat pada gambar berikut :

attribute, class, style binding pada vue.js dengan v-bind

Hyperlink Header Style Red dan Header Style Green yang saya jadikan contoh masih harus di-definisikan satu persatu. Dari sini mungkin akan muncul pertanyaan, bagaimana agar penulisan hyperlink dapat dilakukan secara dinamis ? Jawabannya adalah dengan memanfaatkan directive perulangan v-for.

Copy paste baris kode berikut ke file latihan005.html :

<div>
    <h1 :class="headerClass">Class Binding + MouseOver + v-for</h1>
    <ul>
        <li v-for="hyperlink in listHyperlink">
            <a 
                href="#" 
                onClick="return false;" 
                @mouseover="gantiHeaderClass(hyperlink.warna)" 
            >Header Class {{ hyperlink.warna }}</a>
        </li>
    </ul>
</div>

ke baris yang ditandai dengan <!-- SISIPKAN DI SINI -->

<body>
    <div id="app">

        <div>
            <h1>Tooltip Attribute Binding</h1>
            <a href="#" onClick="return false;" :title="tooltip">Arahkan Mouse di Sini</a>
        </div>

        <div>
            <h1 :class="headerClass">Class Binding + MouseOver</h1>
            <a href="#" onClick="return false;" @mouseover="gantiHeaderClass('red')">Header Class Red</a>
            <br/>
            <a href="#" onClick="return false;" @mouseover="gantiHeaderClass('green')">Header Class Green</a>
        </div>

        <!-- SISIPKAN DI SINI -->

    </div>
    <script src="vue.js"></script>

lalu perbarui kode pada blok new Vue ({ }); menjadi :

<script>
    new Vue ({    
        el: '#app',
        data: {
            headerClass: 'header-black',
            tooltip: 'Tooltip dari Vue.js',
            listHyperlink: [
                { warna: 'red' },
                { warna: 'green' },
                { warna: 'orange' }
            ]
        },
        methods: {
            gantiHeaderClass(warna) {
                this.headerClass = 'header-' + warna;
            }
        }
    });
</script>

Directive v-for me-render collection listHyperlink yang terdiri dari 3 (tiga) property warna berbeda, masing-masing bernilai 'red', 'green' dan 'orange'. Penjelasan lengkap cara perulangan v-for dapat dibaca di Menggunakan Directive v-for Pada Vue.js.

Hasil eksekusi Class Binding + MouseOver + v-vor dari file latihan005.html dapat dilihat pada gambar berikut :

attribute, class, style binding pada vue.js dengan v-bind

Contoh Style Binding

Selain class, styling css untuk mengganti warna teks header h1 ke warna lain juga dapat dilakukan dengan inline style. Pada contoh ini, saya menambahkan event handler mouseout selain dari mouseover yang telah digunakan sebelumnya.

Copy paste baris kode berikut ke file latihan005.html :

<div>
    <h1 :style="{ color: warna }">Style Binding + MouseOver + MouseOut + v-for</h1>
    <ul>
        <li v-for="hyperlink in listHyperlink">
            <a 
                href="#" 
                onClick="return false;" 
                @mouseover="gantiHeaderStyle(hyperlink.warna)" 
                @mouseout="gantiHeaderStyle()" 
            >Header Inline Style {{ hyperlink.warna }}</a>
        </li>
    </ul>
</div>

ke baris yang ditandai dengan <!-- SISIPKAN DI SINI -->

<div>
            <h1 :class="headerClass">Class Binding + MouseOver + v-for</h1>
            <ul>
                <li v-for="hyperlink in listHyperlink">
                    <a 
                        href="#" 
                        onClick="return false;" 
                        @mouseover="gantiHeaderClass(hyperlink.warna)" 
                    >Header Class {{ hyperlink.warna }}</a>
                </li>
            </ul>
        </div>
        
        <!-- SISIPKAN DI SINI -->

    </div>
    <script src="vue.js"></script>
perbarui kembali blok kode new Vue ({ }); dengan baris kode berikut :
<script>
    new Vue ({    
        el: '#app',
        data: {
            headerClass: 'header-black',
            tooltip: 'Tooltip dari Vue.js',
            warna: 'black',
            listHyperlink: [
                { warna: 'red' },
                { warna: 'green' },
                { warna: 'orange' }
            ]
        },
        methods: {
            gantiHeaderClass(warna) {
                this.headerClass = 'header-' + warna;
            },
            gantiHeaderStyle(warna) {
                if (warna) {
                    this.warna = warna;
                } else {
                    this.warna = 'black';
                }
            }
        }
    });
</script>

Cara membaca alur kode :

  • Untuk mengakomodir inline style <h1 :style="{color:warna}">, method gantiHeaderClass tidak digunakan lagi, diganti dengan gantiHeaderStyle dan nilai untuk css color diambil dari property warna:'black'.
  • Argumen hyperlink.warna pada baris kode @mouseover="gantiHeaderStyle(hyperlink.warna)" digunakan untuk merubah nilai property warna ketika kursor mouse diarahkan ke elemen hyperlink. Argumen diteruskan ke parameter warna yang ada di gantiHeaderStyle(warna).
  • Jika yang terjadi sebaliknya / kursor mouse diarahkan keluar elemen hyperlink, baris kode @mouseout="gantiHeaderStyle()" tidak akan menyertakan argumen apapun.
  • Apabila argumen warna tersedia / if (warna), maka argumen akan diteruskan ke property warna melalui this.warna=warna;. Jika tidak, maka property warna akan dikembalikan ke 'black' lagi this.warna='black'.
  • Kembali ke poin pertama, hasil inline style ditampilkan melalui style binding <h1 :style="{color:warna}">.

Hasil eksekusi Style Binding + MouseOver + MouseOut + v-vor dari file latihan005.html dapat dilihat pada gambar berikut :

attribute, class, style binding pada vue.js dengan v-bind