Vuejs (5)---v-bind directive

V-bind directive

I. Overview

V-bind is primarily used for attribute binding, such as your class property, style property, Value property, href attribute, and so on, as long as the attribute is used to bind with the V-bind directive.

Example :

<!--Binding a property -<imgv-bind:src= "IMAGESRC"><!--Abbreviations -<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}]"><!--Style bindings -<Div: Style= "{fontsize:size + ' px '}"></Div><Div: Style= "[Styleobjecta, STYLEOBJECTB]"></Div><!--binds an object that has attributes -<DivV-bind= "{id:someprop, ' other-attr ': Otherprop}"></Div><!--binding DOM Properties with the prop modifier -<DivV-bind:text-content.prop= "text"></Div><!--prop binding. "Prop" must be declared in My-component.  -<my-component:p ROP= "SomeThing"></my-component><!--Pass the props of the parent component to the child component by $props -<child-componentV-bind= "$props"></child-component><!--XLink -<svg><a: Xlink:special= "Foo"></a></svg>

Second, binding HTML Class Object Syntax

We can pass v-bind:class it to an object to dynamically switch class

<v-bind:class= "{active:isactive}"></div> 

The above syntax indicates active whether this class exists or not depends on isActive the truthiness of the data attribute

You can switch more than one class dynamically by passing in more properties in the object. In addition v-bind:class , directives can coexist with normal class attributes. When you have the following template:

<class= "Static"     v-bind:class= "{active:isactive, ' Text-danger ': haserror} '></div>

And the following data

data: {  true,  false}

The result is rendered as:

<class= "Static Active"></div>

When isActive or hasError change, theclass list is updated accordingly. For example, hasError If the value true is, the class list becomes"static active text-danger"

bound data objects do not have to be inline defined in the template

<v-bind:class= "Classobject"></div>

data: {  classobject: {    true,    false  }}

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

 <  div  v-bind:class  = "Classobject"  ></ div  >  

data: {  true,  null},computed: {  function  () {    return  {      this. isActive &&!  this. Error,      this. Error.type = = = ' Fatal '}}  } 

array Syntax

We can pass v-bind:class An array to the application of a class list

<v-bind:class= "[Activeclass, Errorclass]"></Div  >

data: {  ' active ',  ' Text-danger '}

Render as:

<class= "Active Text-danger"></div>

If you also want to toggle the classin the list based on the criteria, you can use the ternary expression

<v-bind:class= "[isActive activeclass: ', Errorclass]"></  div>

This will always be added errorClass , but only isActive when it is Truthy activeClass .

However, this is tedious to write when there are multiple criteria class . Therefore, object syntax can also be used in array syntax

<v-bind:class= "[{active:isactive}, Errorclass]"></Div  >

third, use on the component

When attributes are used class on a custom component, the classes are added to the component's root element. Classes that already exist on this element will not be overwritten.

For example, if you declare this component:

vue.component (' my-component ', {  template: '<class= ' foo bar ' > Hi</p>'})

And then add some class when you use it.

<class= "Baz Boo"></my-component>

The HTML will be rendered as:

<class= "foo bar baz Boo">Hi</p  >

The same is true with data binding class

<v-bind:class= "{active:isactive}"></my-component >

When isActive truthy, HTML is rendered as a

<class= "Foo bar active">Hi</p >

iv. binding inline styles Object Syntax

Object syntax is very intuitive-looking very much like CSS, but actually a JavaScript object.   v-bind:style CSS property names can be named with a camel (CamelCase) or a dash (kebab-case, remember to enclose them in single quotes):

<v-bind:style= "{color:activecolor, fontsize:fontsize + ' px '}">< /div>

data: {  ' red ',  

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

<v-bind:style= "Styleobject"></div>

data: {  styleobject: {    ' red ',    ' 13px '   }

Similarly, object syntax is often combined with the computed properties of the returned object using

array Syntax

   v-bind:styleArray syntax to apply multiple style objects to the same element

<v-bind:style= "[Basestyles, Overridingstyles]"></Div >

Think too much, do too little, the middle of the gap is trouble, or to do, or don't think Lieutenant "14"

Vuejs (5)---v-bind directive