Pada tutorial sebelumnya, kita sudah berhasil menggunakan Fitur v-bind pada Atribut HTML SRC. Namun gambar yang ditampilkan masih sesuai dengan ukuran gambar yang aslinya. Nah bagaimana jika kita mau mengcustom atau mengubah ukurannya? Kita bisa menggunakan Fitur v-bind pada Atribut HTML STYLE.

Untuk menyesuaikan ukuran gambar tersebut, pada HTML biasanya kita menggunakan atribut STYLE, tapi dengan Vue Js kita bisa membuat ukuran gambar yang lebih dinamis, Vue Js juga mendukung penggunaan atribut v-bind:style atau :style, mari kita coba.

index.html :

 

Secara dinamis ukuran gambar atau width pada gambar berubah menjadi dinamis, nilai dari width diambil dari variable lebar, yaitu bernilai 200 pada contoh. Dan jangan lupa juga menambahkan satuannya yaitu px