Guide: Class and Style Bindings

Question 1

What is the reasoning behind the special enhancements for class and style?

Answer 1

• Meddling with string concatenation is annoying, error-prone, and not structured
• Using v-bind with the class and style attributes enables us to have expressions evaluate to objects or arrays, along with strings
• Therefore, strings, objects, and arrays are valid values for class and style

Question 2

Describe the various ways you can use object syntax with v-bind:class.

Answer 2

• By passing an object literal
  
  • `

`

• By using it with the plain class attribute
  
  • `

`

• By passing a reference to an object
  
  • `

`

* define `classObj` in `data`, or from `props` * By binding to a computed property which returns an object
* Super powerful and common

Question 3

Describe the ways to use array syntax.

Answer 3

• String literals in the array
  
  • `

`

• Bind to properties
  
  • `

`

• Toggling an individual class conditionally with a ternary expression
  
  • `

`

• Use object syntax inside of array syntax
  
  • `

`

Question 4

What happens when using the class attribute on a custom component?

Answer 4

Those classes will be added to the component’s root element. Existing classes on this element will not be overwritten.

Question 5

Describe how to properly type style property names with binded style attributes.

Answer 5

• Use either camelCase or kebab-case with quotes
  
  • `
    `

Question 6

What is the best way to use object syntax with the style attribute.

Answer 6

To either bind to a style object, or a computed property, so that the template doesn’t get too bloated.

Question 7

Describe how to use the array syntax for the style attribute

Answer 7

• Allows you to bind multiple style objects to the same element
  
  • `
    `

Question 8

What special operation happens when using :style?

Answer 8

Vue automatically detects and adds appropriate prefixes that are required for specific browsers.