V-bind is used to bind attributes, such as class, style, value, href, etc. You can use v-bind to bind attributes. This time mainly introduced VueJs v-bind instruction, need friends can refer to

<! --> <a v-bind:href="url"></a> <! <a :href="url"></a>
Copy the code

V-bind is used to bind attributes, such as class attributes, style attributes, value attributes, href attributes, etc. V-bind can be used to bind attributes. Example:

<! --> <img v-bind: SRC ="imageSrc"> <! <img: SRC ="imageSrc"> <! Inline string concatenation --> <img: SRC ="'/path/to/images/' + fileName"> <! -- class binding --> <div :class="{ red: isRed }"></div>
<div :class="[classA, classB]"></div>
<div :class="[classA, { classB: isB, classC: isC }]"> <! --> <div :style="{ fontSize: size + 'px' }"></div>
<div :style="[styleObjectA, styleObjectB]"></div> <! Div v-bind= --> <div v-bind="{ id: someProp, 'other-attr': otherProp }"></div> <! <div V-bind :text-content.prop= --> <div v-bind:text-content.prop="text"></div> <! -- Prop binding. "Prop" must be declared in my-Component. --> <my-component :prop="someThing"></my-component> <! - by$propsPass the parent component props to the child component --> <child-component v-bind="$props"></child-component> <! < SVG ><a: XLink :special="foo"></a></svg>
Copy the code

We can pass v-bind: Class an object to dynamically switch classes

<div v-bind:class="{ active: isActive }"></div>
Copy the code

The syntax above says that the existence of the active class will depend on the data attribute isActive’s Truthiness can pass in more attributes in an object to dynamically switch between multiple classes. In addition, the V-bind :class directive can coexist with the ordinary class attribute. When the following template is available:

<div class="static"
  v-bind:class="{ active: isActive, 'text-danger': hasError }"> </div> and the following data data: {isActive:true,
 hasError: false}// Welcome to join the full stack development communication circle to blow water chat learning exchange: 864305860Copy the code

The result is rendered as:

<div class="static active"></div>
Copy the code

When isActive or hasError changes, the class list is updated accordingly. For example, if hasError is true, the class list will become “static Active text-danger” bound data objects do not have to be defined inline in the template

<div v-bind:class="classObject"></div>
data: {
 classObject: {
 active: true.'text-danger': false}// Welcome to join the full stack development communication circle blow water chat learning exchange: 864305860Copy the code

The rendered result is the same as above. We can also bind a computed property of the return object here. This is a common and powerful pattern:

<div v-bind:class="classObject"></div>
 
data: {
 isActive: true,
 error: null
},
computed: {
 classObject: function () {
 return{ active: this.isActive && ! this.error,'text-danger': this.error && this.error.type === 'fatal'}// Welcome to join the full stack development communication circle to learn and communicate: 864305860}// For the front-end staff of 1-3 years}// help break through technical bottlenecks and improve thinking abilityCopy the code

Array syntax We can apply a class list by passing an array to V-bind :class

<div v-bind:class="[activeClass, errorClass]"></div>
data: {
 activeClass: 'active',
 errorClass: 'text-danger'
}
Copy the code

Apply colours to a drawing as follows:

<div class="active text-danger"></div>
Copy the code

If you also want to switch classes in a list based on criteria, you can use a ternary expression

<div v-bind:class="[isActive ? activeClass : '', errorClass]"></div>
Copy the code

Writing this will always add errorClass, but only activeClass 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 v-bind:class="[{ active: isActive }, errorClass]"></div>
Copy the code

When you use the class attribute on a custom component, the classes are added to the root element of that component. Classes that already exist on this element are not overwritten. For example, if you declare this component:

Vue.component('my-component', {
 template: '<p class="foo bar">Hi</p>'
})
Copy the code

Then add some classes when you use it

<my-component class="baz boo"></my-component>
Copy the code

The HTML will be rendered as:

<p class="foo bar baz boo">Hi</p>
Copy the code

The same is true for classes with data binding

<my-component v-bind:class="{ active: isActive }"></my-component>
Copy the code

When isActive is truthy, HTML will be rendered as

<p class="foo bar active">Hi</p>
Copy the code

The v-bind:style object syntax is straightforward — it looks a lot like CSS, but it’s actually a JavaScript object. CSS attribute names can be camelCase or kebab-case delimited (remember to use single quotes) :

<div v-bind:style="{ color: activeColor, fontSize: fontSize + 'px' }"></div>
data: {
 activeColor: 'red', fontSize: 30}// Welcome to join the full stack development communication circle to learn communication: 864305860Copy the code

It is often better to bind directly to a style object, which makes the template clearer

<div v-bind:style="styleObject"></div> 
data: {
 styleObject: {
 color: 'red',
 fontSize: '13px'}// Welcome to join the full stack development communication circle blow water chat learning exchange: 864305860Copy the code

Similarly, object syntax is often combined with computed properties that return objects using array syntax V-bind :style array syntax allows multiple style objects to be applied to the same element

<div v-bind:style="[baseStyles, overridingStyles]"></div>
Copy the code

conclusion

Thank you for watching, if there are shortcomings, welcome to criticize.