Vue cheatsheet > V-bind data

v-bind data

Use "v-bind:" or a ":" shorthand for a two-way data binding with the selected attribute.

#vue#directive


                


<a v-bind:href="yourHref" v-bind:title="yourTitle" v-bind:class="yourClass"> {{ yourLink  }}</a>
<!-- Using shorthand -->
<a :href="yourHref" :title="yourTitle" :class="yourClass"> {{ yourLink  }}</a> 

<script>
    new Vue({
        el: '#app',
        data: {
            yourHref: '/home',
            yourTitle: 'Homepage',
            yourClass: 'link',
            yourLink: 'Back to home'
        }
    })
</script>

copy