Class binding
(1) String method binding
(2) Object syntax
We can pass v-bind:classan object to dynamically switch class:
At the same time, the v-bind:class instruction can also coexist with ordinary class attribute, for example:
The bound data object does not have to be defined inline in the template:
The effect is exactly the same as the example above.
We can also bind a calculated property of the returned object here :
It can still run normally.
(3) Array syntax:
We can pass an array to v-bind:classto apply a class list:
Array syntax can still coexist with ordinary class attributes.
Object syntax can also be used in array syntax:
The result is exactly the same as the example above.
Style binding
(1) Object syntax
v-bind:styleThe object syntax is very intuitive-it looks very much like CSS, but it is actually a JavaScript object. CSS property names can be named with camelCase or dashes (kebab-case, remember to enclose them in quotation marks):
It is usually better to bind directly to a style object, which makes the template clearer:
The effect is the same as above.
Similarly, object syntax is often used in conjunction with the calculated properties of the returned object.
(2) Array syntax
v-bind:style The array syntax of can apply multiple style objects to the same element:
(3) Multiple values
Starting from 2.3.0 to styleprovide a binding in the array including a plurality of property values, commonly used to provide a plurality of prefixed values, for example:
This writing will only render the last value in the array supported by the browser. In this example, if the browser supports flexbox without the browser prefix, it will only render display: flex.