05. Class and Style Bindings

Question 1

Binding HTML Classes

“Object Syntax”

Answer 1

We can pass an object to v-bind:class to dynamically toggle classes.

You can have multiple classes toggled by having more fields in the object.

he v-bind:class directive can also co-exist with the plain class attribute.

Question 2

Array Syntax

Answer 2

We can pass an array to v-bind:class to apply a list of classes:

<div></div>
data: {
  activeClass: 'active',
  errorClass: 'text-danger'
}

Question 3

Condicionales en las clases

Answer 3

If you would like to also toggle a class in the list conditionally, you can do it with a ternary expression:

<div></div>

Question 4

With Components

Answer 4

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.

Question 5

Binding Inline Styles

Object Syntax

Answer 5

The object syntax for v-bind:style is pretty straightforward - it looks almost like CSS, except it’s a JavaScript object. You can use either camelCase or kebab-case (use quotes with kebab-case) for the CSS property names:

It is often a good idea to bind to a style object directly so that the template is cleaner:

<div></div>

data: {
  styleObject: {
    color: 'red',
    fontSize: '13px'
  }
}

Again, the object syntax is often used in conjunction with computed properties that return objects.

Question 6

Array Syntax

Answer 6

The array syntax for v-bind:style allows you to apply multiple style objects to the same element:

Question 7

Auto-prefixing

Answer 7

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.

Question 8

Multiple Values

Answer 8

Starting in 2.3.0+ you can provide an array of multiple (prefixed) values to a style property, for example:

<div></div>

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.