OverVue.dev

# 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>

  
        Copied!
1
2
3
4
5
6
7
8
9
10
11
12

Shorthand

Use :src instead of v-bind:src

# Output:

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>

  
        Copied!
1
2
3
4
5
6
7
8
9
10
11
12
13
14

# Output:

Link to my Twitter

WARNING

To link to a different "page" of the SPA, use Vue Router

See the official Vue.js doc

← Class & Style Binding →