Vue.js Combat Learning--v-bind and class and style bindings

Note: This content excerpt from: Liang's "vue.js Combat"

Note: Remember to introduce vue.js to run Oh, the article posted in the code directly copied is not possible, HTML CSS JS are put together, and there is no reference to vue.js.

Dom elements are often dynamically bound to some class class name or style.

1. Understanding V-bind Directives

Its main usage is to dynamically update the properties on the HTML element.

In data binding, the most common two requirements are the dynamic binding of the element's style name class and the inline style style, which are also attributes of the HTML, so you can use the V-bind directive. We only need to use V-bind to calculate the final string of the expression, but sometimes the logic of the expression is more complicated, the use of string concatenation is difficult to read and maintain, so vue.js enhanced the binding of class and style.

2. Several ways to bind class

2-1. Object syntax

To set an object for V-bind:class, you can switch class dynamically.

<div class= "App1" >    <div:class= "{' Active ': isActive}" > I'm really black! </div></div>var app1=new Vue ({    el: '. App1 ',    data:{        isactive:true    }});

In the above instance, the class name active relies on the data isactive, and when it is true, the div will have the class name IsActive, which is false.

Objects can also be passed into multiple properties to dynamically switch class. In addition, the class can coexist with the normal class

<div class= "App2" > <div class= "static": class= "Classes" > I was originally black ......</div></div>varApp2=NewVue ({el:'. App2 ', data:{isActive:true, Error:NULL}, computed:{classes:function(){            return{active: This. isActive &&! This. Error,' Text-fail ': This. Error && This. error.type=== ' fail '            }        }    }});

When: class's expression is too long or complex logic, you can also bind a computed property, which is a very friendly and common usage, one of the conditions of more than two, you can use data or computed, the above example is the use of the computed properties.

2-2. Array syntax

When you need to apply more than one class, you can use the array syntax to bind an array to class, apply a class list

<div class= "APP3" >    <div:class= "[isActive? Activecls: ', Errorcls]" > Ternary expressions </div></div> var app3=New  Vue ({    el:'. App3 ',    data:{        isActive:true  ,        activecls:' active ',        errorcls:' error '    }});

You can also use the ternary expression to toggle class based on the condition, as above.

Style error is always applied, and style activecls is applied when the data isactive is true. When a class has multiple conditions, it is cumbersome to write, and you can use object syntax in the array syntax.

<div class= "APP4" > <div:class= "[{' Active ': isactive},errorcls,classes]" > I look </div></div>varapp4=NewVue ({el:'. App4 ', data:{isActive:true, Errorcls:' Error ', Size:' Large ', Disabled:true}, computed:{classes:function(){            return [                ' BTN ',                {                    [' btn-' + This. Size]: This. size!== ',                    [' Btn-disabled ']: This. Disabled}]         }    }}); 

Of course, as with object syntax, there are three ways to use data, computed, and methods, as above.

2-3. Using on the component

After the component is said, here is not introduced, skip.

3. Binding inline style

Using V-bind:style (that is, style), you can bind an inline style to an element, similar to: class, with object syntax and array syntax, which looks much like a direct current element that writes CSS

<div class= "APP5" >    <div:style= "{' Color ': color, ' fontSize ': fontsize+ ' px '}" > Text </div></div >var app5=New  Vue ({    el:'. App5 ',    data:{        color:' red ',        FontSize    }});

CSS property names use hump naming or short horizontal splitter.

In most cases, writing a long list of styles directly is not easy to read and maintain, so it is generally written in data or computed.

<div class= "APP6" >    <div:style= "Styles" > Text </div></div>var app6=New  Vue ({    el:'. App6 ',    data:{        styles:{            color:' red ',            FontSize:14+ ' px '}}            )

In real business, the array syntax of a style is not commonly used, because it can often be written in an object, and the more commonly used should be computed properties.

In addition, when using the: style, Vue.js automatically adds a prefix to the special CSS property name, such as transform.

Finally, give all the CSS you need to use today.

<style type= "Text/css" >    . active{        Color:blueviolet;        border:2px solid #00f;    }    . error{        color:red;    }    . static{        background: #0f0;    }    . btn{        outline:dashed;    }    . btn-large{        background: #ddd;    }    . btn-disabled{        text-decoration:underline;    } </style>   

Note: This content excerpt from: Liang's "vue.js Combat"

Vue.js Combat Learning--v-bind and class and style bindings