This is the sixth day of my participation in the August Text Challenge.More challenges in August

In this article, we will discuss how to use V-bind and what we need to be aware of when using it.

How to use

The V-bind directive: dynamically binds one or more attributes, or a component prop, to an expression. Support other types of values, such as groups of numbers or objects, when binding class or style attributes.

V-bind can be abbreviated as:.

The binding attribute

// Fixed binding<img :src="imageSrc" />// Dynamic binding<button :[key] ="value"></button>
Copy the code

As you can see from the above code, you can not only bind a property fixed, but also bind a property dynamically.

The class binding

/ / object<div :class="{ red: isRed }"></div>/ / array<div :class="[classA, classB]"></div>// Array object<div :class="[classA, { classB: isB, classC: isC }]">// Dynamic data, which can be a string or an object<div :class="class"></div>// Expression, ternary operation<div :class="isTrue? 'trueClass':'falseClass'"></div>
Copy the code

As can be seen from the above code, we can choose an appropriate class binding method according to our own needs. Class binding is often used in our project development, such as state switching, dynamic style change, etc.

Style binding

/ / object<div :style="{ fontSize: size + 'px' }"></div>/ / array<div :style="[styleObjectA, styleObjectB]"></div>// Multiple values render only the last value in the array that is supported by the browser<div :style="{ display: ['-webkit-box', '-ms-flexbox', 'flex'] }"></div>
Copy the code

As you can see from the code above, you can choose an appropriate style binding method based on your needs.

Matters needing attention

What is worth our attention is:

  1. We can also write the above in template strings.
<div :style="{ fontSize: `${size}px`}"></div>
Copy the code
  1. .camelModifiers allow you to use thev-bindProperty name is humped
/ / before compilation<svg :view-box.camel="viewBox" :test-test.camel="viewBox"></svg>
<div :test-test.camel="viewBox"></div>/ / the compiled<svg viewBox="viewBox" testTest="viewBox"></svg>
<div testtest="viewBox"></div></div>
Copy the code

As you can see from the above code, SVG’s viewBox property and custom properties are humped, while div’s custom properties are just one thing, and we need to be careful when using them.

  1. v-bindMerging behavior inVue3 and Vue2The differences in

In Vue2, the individual property always overrides the binding in V-bind =”object” as follows:

/ / before compilation<div id="red" v-bind="{ id: 'blue' }"></div>
或
<div v-bind="{ id: 'blue' }" id="red" ></div>/ / the compiled<div id="red"></div>
Copy the code

In Vue3, the merging of the individual property with V-bind =”object” is overwritten in order as follows:

/ / before compilation<div id="red" v-bind="{ id: 'blue' }"></div>/ / the compiled<div id="blue"></div>/ / before compilation<div v-bind="{ id: 'blue' }" id="red" ></div>/ / the compiled<div id="red"></div>
Copy the code

conclusion

  1. In Vue3, if an element defines both V-bind =”object” and the same individual property, the order in which the bindings are declared determines how they are combined.

  2. CSS property names can be either camelCase or kebab-case delimited (remember to use quotes).

  3. Choose the appropriate usage mode according to your own requirement scenario.

For more articles, the portal has opened: Look back at the Vue3 catalogue!