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 codeBind 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.
multiplicity
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