V-Bind is a Vue kind of way to bind data to attributes or classes. This means that you can bind data to an attribute or event using v-bind or : for short. Doing this you can manipulate the display of a selector, content of an attribute and more.
Binding data to an Attribute
In this example we simply add a title attribute text to the title tag of a button with v-bind. You will see how easy it is to bind data to an attribute this way. By adding:
to the button we make the button title attribute accessible by Vue. To replace title by a text we want we add data object to the Vue instance and add it there:
When you now hover over the button you will see the text as defined in the data object. Here is the full example below:
As Vue is reactive we can change the data in the background and see that happen in the foreground. With the Vue Chrome extension installed open the console and add
$vm0.title = "Something else";
You will then see that the title has changed hovering over the button:
And that is reactivity at work. And at the same time you see the binding in action.