Class lists and inline styles for manipulating elements are a common requirement for data binding. Because they are attributes, we can handle them with V-bind: we just need to evaluate the string result with the expression.

The result of an expression can be an object or an array in addition to a string.

Bind the HTML class

Object syntax

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

The syntax above indicates that the presence of the Font class depends on the value of the data attribute isFont.

You can also pass in more attributes to dynamically switch between classes

In addition, the V-bind :class directive can coexist with the ordinary class attribute.

Of course, the bound data does not have to be defined in the template, which is fine, and the render result is the same as above

Array syntax

We can apply a class list by passing an array to V-bind :class:

Of course, if you want to switch classes in a list based on conditions, you can use a ternary expression:

Writing this will always add col, but only Font if isActive is truthy.

However, this is a bit cumbersome when there are multiple conditional classes. So you can also use object syntax in array syntax:

<div class="background" V-bind :class="[{Font:isActive},col]">Copy the code

Bind inline styles

Object syntax

The v-bind:style object syntax is straightforward — it looks a lot like CSS, but it’s actually a JavaScript object.

It is usually better to bind directly to a style object, which makes the template clearer:

Array syntax

V-bind :style array syntax can also apply multiple style objects to the same element:

Automatic prefix adding

When V-bind :style ‘ ‘uses CSS attributes that require a browser engine prefix, such as transform, vue.js automatically detects and adds the appropriate prefix.


You can provide an array of values for a property in the style binding. This is often used to provide multiple prefixed values, for example:

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