# Bind HTML attributes / v-bind
Use v-bind: or : to bind an html any attribute like "src", "href"...
# Bind an image
To bind an image in a vue template, use v-bind:src or the shortcut :src
# Input:
<template>
<div><img :src="imageLink" /></div>
</template>
<script>
export default {
data() {
return {
imageLink: 'https://source.unsplash.com/collection/1653544/710x710'
}
}
}
</script>
1
2
3
4
5
6
7
8
9
10
11
12
2
3
4
5
6
7
8
9
10
11
12
Shorthand
Use :src instead of v-bind:src
# Output:
# Bind a link href
To bind a link in a vue template, use v-bind:href or the shortcut :href
# Input:
<template>
<div>
<a :href="link" target="blank">Link to my Twitter</a>
</div>
</template>
<script>
export default {
data() {
return {
link: 'https://twitter.com/RomainCapelle'
}
}
}
</script>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
2
3
4
5
6
7
8
9
10
11
12
13
14
# Output:
WARNING
To link to a different "page" of the SPA, use Vue Router