VueJS - Bind To HTML Attribute

In the previous tutorial we saw how we can use the data property to display content on the screen, is this you'll see how you can bind this data to a HTML attribute. For example if you have a div like this

<div id="app">
    <div title="message">
        Hover your mouse over me for a few seconds to see my dynamically bound title!
    </div>
</div>

When you hover over this box on the page you'll see a tooltip appear with the word message in it. Using VueJS we can change message to a data property and now make this dynamic. First we need to create a Vue object and add a new data property for message.

<script src="https://unpkg.com/vue/dist/vue.js"></script>
<script>
    var app = new Vue({
        el: '#app',
        data: {
            message: 'You loaded this page on ' + new Date()
        }
    })
</script>

With message data setup we can see this on the page by opening your console and entering app.message and you'll see the time the page was loaded. Next we need to bind this data property to the HTML attribute, we do this by using the Vue directive v-bind.

<div id="app">
    <div v-bind:title="message">
        Hover your mouse over me for a few seconds to see my dynamically bound title!
    </div>
</div>

The next time you hover over the message you'll see the contents of the app.message data property.