# Vue3 Style Binding ## Vue.js Class `class` and `style` are attributes of HTML elements used to set the element's styles. We can use `v-bind` to set style attributes. When handling `class` and `style`, `v-bind` expressions can be not only strings but also objects or arrays. `v-bind:class` can be abbreviated as `:class`. * * * ## Class Attribute Binding We can set an object for `v-bind:class` to dynamically toggle **classes**: ## Example 1 In this example, setting `isActive` to `true` displays a green `div` block; setting it to `false` hides it: [Try it »](#) The rendered `div` class in the above example is: We can also pass more properties in the object to dynamically toggle multiple classes. Additionally, the `:class` directive can coexist with the normal `class` attribute. ## Example 2 The `text-danger` class background color overrides the `active` class background color: [Try it »](#) The rendered `div` class in the above example is: !(#) When `isActive` or `hasError` changes, the `class` attribute value will update accordingly. For example, if `active` is `true`, the class list will become `"static active text-danger"`. We can also directly bind to an object in the data: ## Example 3 The `text-danger` class background color overrides the `active` class background color: [Try it »](#) The rendering result of Example 3 is the same as Example 2. Furthermore, we can bind to a computed property that returns an object. This is a common and powerful pattern: ## Example 4 data(){return{isActive: true, error: null}}, computed: {classObject(){return{active: this.isActive&& !this.error, 'text-danger': this.error&&this.error.type === 'fatal'}}} [Try it »](#) ### Array Syntax We can pass an array to **v-bind:class**, as shown in the following example: ## Example 5 [Try it »](#) The rendered `div` class in the above example is: We can also use a ternary expression to toggle classes in the list: ## Example 6 `errorClass` is always present. `activeClass` is added when `isActive` is `true`: [Try it »](#) The rendered `div` class in the above example is: * * * ## Vue.js Style (Inline Styles) We can set styles directly in `v-bind:style`, which can be abbreviated as `:style`: ## Example 7 [Try it »](#) The rendered `div` style in the above example is: !(#) We can also bind directly to a style **object** to make the template cleaner: ## Example 8 [Try it »](#) **v-bind:style** can use an array to apply multiple style objects to a single element: ## Example 9 [Try it »](#) > Note: When **v-bind:style** uses CSS properties that require specific prefixes, such as `transform`, Vue.js will automatically detect and add the appropriate prefixes. ### Multiple Values You can provide an array of multiple values for a property in style bindings, often used to provide multiple prefixed values, for example: This will only render the last value in the array that the browser supports. In this example, if the browser supports flexbox without a vendor prefix, it will only render `display: flex`. * * * ## Using Class Attribute on Components When you use the `class` attribute on a custom component with a single root element, these classes will be added to that element. Existing classes on this element will not be overwritten. ## Example 10 // Create a Vue app const app = Vue.createApp({}) // Define a new global component named app.component('', { template: '

I like !

' }) app.mount('#app') [Try it »](#) The rendered `div` class in the above example is:

I like !

!(#) This also applies to components with data-bound classes: When `isActive` is `true`, the HTML will be rendered as:

Hi

If your component has multiple root elements, you need to define which parts will receive this class. You can use the `$attrs` component property to do this: ## Example 11 const app = Vue.createApp({}) app.component('', { template: `

I like !

This is a child component ` }) app.mount('#app') [Try it »](#) **Note**: In the template, `` ` `` is a backtick, not a single quote `'`. The rendered `div` class in the above example is: !(#)