Vue TutorialLesson 4Free preview
Vue v-bind
This lesson is part of Vue · All levels
Summary
The v-bind directive is used to bind dynamic values from Vue data to HTML attributes, component props, or styles. Without a v-bind, the attribute value is treated as normal text so it does not follow changes in the data. Vue provides a colon-shaped abbreviation, for example:src replaces the longer v-bind:src.
Key points
- V-bind binds dynamic values to HTML attributes or component props.
- The abbreviation for v-bind:attr is:attr.
- The wall can be an expression, for example:title="message" or:disabled="!available".
- V-bind is also used for component props, not just DOM attributes.
- Some derivative directives like:class and:style have a special syntax.
Full lesson
Code examples and quizzes
Full lessons, code examples, and quizzes are available to subscribers. 5 questions.