Make an RPG
Example of Vue v-bind
Attributes are the things within the tags, for instance id, class, or title
Think of v-bind as a way to dynamically change attribute strings. Typically you will change attributes like: style, class, title, etc.
Attriutes, like the span title can be dynamically set:
Hover your mouse over me for a few seconds to see my dynamically bound title!
Let's dynamically set the class. You can set isActive to false in the console by doing app2.isActive = false. When you do that, the color will no longer be red.
You can set multiple classes in v-bind as well as have regular classes, like so:
The presence of curly braces tells it to evaluate the truthiness if isActive and place active there. So, you can set the class dynamically using a regular v-bind without curly braces:
There are two ways to v-bind styles.
1. You can place style objects directly into a v-bind:style
2. You can use a data object to specify the style
You can specify multiple style objects like so:
The second object overrides the first once, hence the color of the text is blue, not orange.
In the next lesson, we will learn about Example of Vue Components
Get the Latest Tutorial Updates