6. V-Bind

tech

Table of Content

• Introduction
• Binding src
• Binding Style
• Binding Class
• Binding Title

Introduction

V-Bind bekerja dengan melakukan binding (mengikat) data nilai, sehingga data tersebut dapat dipanggil atau digunakan secara dinamis. Singkatnya v-bind berfungsi untuk mendinamiskan attribut html.

Binding src

app.js

let app = new Vue({
el: '#app',
data: {
	imageUrl: 'kucing.jpg',
}
})

index.html

<div id="app">
    <img :src="imageUrl" width="250" alt="foto"><br>
</div>

Binding Style

app.js

let app = new Vue({
el: '#app',
data: {
	imageUrl: 'kucing.jpg',
	lebar: 150,
}
})

index.html

<div id="app">
    <img :src="imageUrl" :style="{width: lebar + 'px'}"><br>
</div>

Note = jangan lupa tambahkan kurung kurawal 1x saja

Binding Class

app.js

let app = new Vue({
el: '#app',
data: {
	imageUrl: 'kucing.jpg',
	lebar: 150,
	bentuk: 'imgradius',
}
})

index.html

<style>
.imgradius{
	border-radius: 25px;
}
</style>
 
<div id="app">
    <img :src="imageUrl" :style="{width: lebar + 'px'}" :class="bentuk"><br>
</div>

Binding Title

app.js

let app = new Vue({
el: '#app',
data: {
	imageUrl: 'kucing.jpg',
	lebar: 150,
	bentuk: 'imgradius',
	imgtitle: 'Gambar Kucing'
}
})

index.html

<div id="app">
<img :src="imageUrl" :style="{width: lebar + 'px'}" :class="bentuk" :title="imgtitle"><br>
</div>