- Support Vue
- The Vue Instance
- Template Syntax
- Computed Properties and Watchers
- Class and Style Bindings
- Conditional Rendering
- List Rendering
- Event Handling
- Form Input Bindings
Transitions & Animation
- Enter/Leave & List Transitions
- State Transitions
Reusability & Composition
- Custom Directives
- Render Functions & JSX
- Production Deployment
- Single File Components
- Unit Testing
- TypeScript Support
- State Management
- Server-Side Rendering
- Reactivity in Depth
- Migration from Vue 1.x
- Migration from Vue Router 0.7.x
- Migration from Vuex 0.6.x to 1.0
- Comparison with Other Frameworks
- Join the Vue.js Community!
- Meet the Team
Class and Style Bindings
A common need for data binding is manipulating an element’s class list and its inline styles. Since they are both attributes, we can use
v-bind to handle them: we only need to calculate a final string with our expressions. However, meddling with string concatenation is annoying and error-prone. For this reason, Vue provides special enhancements when
v-bind is used with
style. In addition to strings, the expressions can also evaluate to objects or arrays.
We can pass an object to
v-bind:class to dynamically toggle classes:
The above syntax means the presence of the
active class will be determined by the truthiness of the data property
You can have multiple classes toggled by having more fields in the object. In addition, the
v-bind:class directive can also co-exist with the plain
class attribute. So given the following template:
And the following data:
It will render:
hasError changes, the class list will be updated accordingly. For example, if
true, the class list will become
"static active text-danger".
The bound object doesn’t have to be inline:
This will render the same result. We can also bind to a computed property that returns an object. This is a common and powerful pattern:
We can pass an array to
v-bind:class to apply a list of classes:
Which will render:
If you would like to also toggle a class in the list conditionally, you can do it with a ternary expression:
This will always apply
errorClass, but will only apply
isActive is truthy.
However, this can be a bit verbose if you have multiple conditional classes. That’s why it’s also possible to use the object syntax inside array syntax:
This section assumes knowledge of Vue Components. Feel free to skip it and come back later.
When you use the
class attribute on a custom component, those classes will be added to the component’s root element. Existing classes on this element will not be overwritten.
For example, if you declare this component:
Then add some classes when using it:
The rendered HTML will be:
The same is true for class bindings:
isActive is truthy, the rendered HTML will be:
The object syntax for
It is often a good idea to bind to a style object directly so that the template is cleaner:
Again, the object syntax is often used in conjunction with computed properties that return objects.
The array syntax for
v-bind:style allows you to apply multiple style objects to the same element:
When you use a CSS property that requires vendor prefixes in
v-bind:style, for example
transform, Vue will automatically detect and add appropriate prefixes to the applied styles.
Starting in 2.3.0+ you can provide an array of multiple (prefixed) values to a style property, for example:
This will only render the last value in the array which the browser supports. In this example, it will render
display: flex for browsers that support the unprefixed version of flexbox.