Class and Style Bind
Class lists and inline style operating element is a common demand for data binding. Because they are property, so we can v-bind deal with them: just need to figure out the string can result through expression.
However , string concatenation cumbersome and error-prone.
Therefore, when v-bind used class and style when, Vue.js do a special enhancements.
In addition to the result of the expression of type string, it may also be an object or an array .
Binding HTML Class include: object syntax, array syntax used in the assembly
Object syntax:
1:<div v-bind:class="{ active: isActive }"></div>
2: a plurality of general class and class and may coexist
. 3: < div V the bind-: class = "classObject"> </ div> bound data objects do not have defined inline in a template:
4: You can also return here to bind a target calculate property , this is very powerful!
Array syntax:
1:<div v-bind:class="[activeClass, errorClass]"></div>
data: { activeClass: 'active', errorClass: 'text-danger' }
2:<div v-bind:class="[isActive ? activeClass : '', errorClass]"></div>
. 3: < div V the bind-: class = "[{Active: isActive}, errorClass]"> </ div> // object syntax may be used in the array syntax
Used in the assembly: When used on a custom component class when the properties, these classes will be added to the root element of the assembly above. This element existing classes will not be overwritten.
Binding inline style include: object syntax, array syntax, automatically add a prefix, multiple values
Object syntax: v-bind:style object syntax is very intuitive - looked very much like CSS, but in fact is a JavaScript object. CSS property name can be separated by a camel (camelCase) or dashes (kebab-case, remember quotes) is named:
<div the bind-V: style = " {Color: activeColor, the fontSize: the fontSize + 'PX'} " > </ div>
< div V the bind-: style = "the styleObject"> </ div> // a direct binding computing objects or attributes
Array syntax: v-bind:style array syntax of multiple style objects can be applied to the same elements:
<div the bind-V: style = " [baseStyles, overridingStyles] " > </ div> Each array element is a style object {color: red. . . }
Automatically add a prefix: When v-bind:style using the need to add browser engine prefix when CSS properties, such as transform, Vue.js will automatically detect and add the appropriate prefix .
Multiple values 2.3.0+: From 2.3.0 you can style provide a binding array includes a plurality of property values, commonly used to provide a plurality of prefixed values, for example:
<div: style = "{display : [ '-webkit-box', '-ms-flexbox', 'flex']}"> </ div>
write array will render the final value of supported browser . In this case, if the browser supports flexbox browser without prefix, then it will only render the display: flex.