Class and Style Bindings

    We can pass an object to :class (short for 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 isActive.

    You can have multiple classes toggled by having more fields in the object. In addition, the :class directive can also co-exist with the plain class attribute. So given the following template:

    1. <div
    2.   class="static"
    3.   :class="{ active: isActive, 'text-danger': hasError }"
    4. ></div>

    And the following data:

    1. data() {
    2.   return {
    3.     isActive: true,
    4.     hasError: false
    5.   }
    6. }

    It will render:

    1. <div class="static active"></div>

    When isActive or hasError changes, the class list will be updated accordingly. For example, if hasError becomes true, the class list will become "static active text-danger".

    The bound object doesn’t have to be inline:

    1. <div :class="classObject"></div>
    1. data() {
    2.   return {
    3.     classObject: {
    4.       active: true,
    5.       'text-danger': false
    6.     }
    7.   }
    8. }

    This will render the same result. We can also bind to a that returns an object. This is a common and powerful pattern:

      2.   return {
      3.     isActive: true,
      4.     error: null
      5.   }
      6. },
      7. computed: {
      8.   classObject() {
      9.     return {
      10.       active: this.isActive && !this.error,
      11.       'text-danger': this.error && this.error.type === 'fatal'
      12.     }
      13.   }
      14. }

      Array Syntax

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

      1. data() {
      2.   return {
      3.     activeClass: 'active',
      4.     errorClass: 'text-danger'
      5.   }
      6. }
      1. <div class="active text-danger"></div>

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

      1. <div :class="[isActive ? activeClass : '', errorClass]"></div>

      This will always apply errorClass, but will only apply activeClass when 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:

      1. <div :class="[{ active: isActive }, errorClass]"></div>

      When you use the class attribute on a custom component with a single root element, those classes will be added to this element. Existing classes on this element will not be overwritten.

      For example, if you declare this component:

      1. const app = Vue.createApp()
      3. app.component('my-component', {
      4.   template: `<p class="foo bar">Hi!</p>`
      5. })

      Then add some classes when using it:

      1. <div id="app">
      2. </div>

      The rendered HTML will be:

      The same is true for class bindings:

      1. <p class="foo bar active">Hi</p>

      If your component has multiple root elements, you would need to define which component will receive this class. You can do this using $attrs component property:

      1. <div id="app">
      2.   <my-component class="baz"></my-component>
      3. </div>
      1. const app = Vue.createApp()
      3. app.component('my-component', {
      4.   template: `
      5.     <p :class="$attrs.class">Hi!</p>
      6.     <span>This is a child component</span>
      7.   `
      8. })

      You can learn more about component attribute inheritance in section.

      Binding Inline Styles

      Object Syntax

      The object syntax for :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:

      1. <div :style="{ color: activeColor, fontSize: fontSize + 'px' }"></div>
      1. data() {
      2.   return {
      3.     activeColor: 'red',
      4.     fontSize: 30
      5.   }
      6. }

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

      1. <div :style="styleObject"></div>
      1. data() {
      2.   return {
      3.     styleObject: {
      4.       color: 'red',
      5.       fontSize: '13px'
      6.     }
      7.   }

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

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

      Auto-prefixing

      When you use a CSS property that requires in :style, for example transform, Vue will automatically detect and add appropriate prefixes to the applied styles.

      You can provide an array of multiple (prefixed) values to a style property, for example:

      1. <div :style="{ display: ['-webkit-box', '-ms-flexbox', 'flex'] }"></div>

      This will only render the last value in the array which the browser supports. In this example, it will render for browsers that support the unprefixed version of flexbox.