Vue#class and Style Bindings

binding Htmlclass

Before I looked at it, I thought I'd write a binding class, which would be like binding data.

Class ={{class-a}}

When looking at the official tutorials, it is not recommended to write such

v-bind:class="{' class-a ': IsA, ' class-b ': IsB}"

The official explanation, I think is still quite grounded gas, at least I can see understand.

A common requirement for data binding is the class list of the action element and its inline style. Because they are all attributes, we can v-bind deal with them: we just need to figure out the final string of the expression. However, string concatenation is troublesome and error-prone. Therefore, v-bind when used in class and style , vue.js specifically enhances it. The result type of an expression can be an object or an array, in addition to a string.

You can use object syntax to manipulate them:

Can do this: https://jsfiddle.net/miloer/36ek1uco/

You can also do this: https://jsfiddle.net/miloer/36ek1uco/1/

You can also use array syntax to handle:

https://jsfiddle.net/miloer/36ek1uco/2/

I think it's quite creative to use expressions in the style, but it's a little bit more complicated, but the official says:

This is tedious to write when there are multiple criteria class. In 1.0.19+, you can use object syntax in the array syntax:

<v-bind:class="[ClassA, {CLASSB:ISB, classc:isc}]" > 

That's not much better.

binding inline styles:

This is the same as binding Htmlclass method.

https://jsfiddle.net/miloer/36ek1uco/3/

https://jsfiddle.net/miloer/36ek1uco/4/

automatically add prefixes

This I think is very convenient, when using V-bind:style to add prefix CSS, Vue.js will automatically detect and add the corresponding prefix.

V-bind

• abbreviation::
• Type:* (with argument) | Object (without argument)
• Parameters:attrOrProp (optional)
• modifier: usage: dynamically binds one or more attribute, or a component prop to an expression.
  • .sync-bidirectional binding, only for prop bindings.
  • .once-One-time binding, only for prop bindings.
  • .camel-Rename the binding attribute name back to the hump. Bindings that can be used only for ordinary HTML attributes, typically used to bind SVG features named by the hump, such as viewBox .

• class style supports other types of values, such as arrays or objects, when binding or.

  When binding prop, prop must be declared in the subassembly. You can specify different binding types with modifiers.

  When there are no parameters, you can bind to an object. Note at this time class and the style binding does not support arrays and objects.

• Example:
  

  <!--bindings Attribute--<ImgV-bind:src="IMAGESRC" ><!--abbreviations--<Img: src="IMAGESRC" ><!--binding Class--<Div: class="{red:isred}" ></Div><Div: class="[ClassA, ClassB]" ></Div><Div: class="[ClassA, {CLASSB:ISB, classc:isc}]" ></Div><!--binding Style--<Div: style="{fontsize:size + ' px '}" ></Div><Div: style="[Styleobjecta, STYLEOBJECTB]" ></Div><!--bound to an object--<DivV-bind="{id:someprop, ' other-attr ': Otherprop}" ></div><!--prop binding, "prop" must be declared within the My-component component-- ><my-component :p Rop= "someThing" ></my-component> <!--bidirectional prop binding--><my-component :p rop.sync= "someThing" ></ My-component><!--single prop binding-->< my-component :p rop.once= "someThing" > </MY-COMPONENT>

• See also:
  • Class and Style Bindings
  • Component Props

Vue#class and Style Bindings