Vue.js class and style bindings

Class and style bindings

A common requirement for data binding is the class list of the manipulation element and its inline style. Because they are all attributes, we can use V-bind to handle them: we just need to calculate the final string of the expression.

However, string concatenation is cumbersome and error-prone, so vue.js specifically enhances it when V-bind is used for class and style. The result type of an expression can be an object or an array, in addition to a string.

Binding HTML Class

1. Object syntax

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

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

The above syntax indicates that the update of class active will depend on whether the data property isActive is True

We can also pass in more properties in the object to dynamically switch multiple classes. In addition,V-bind:class can coexist with normal class attributes

<div id= "Example" class= "static" v-bind:class= "{' Orange ': isripe, ' pear ': isnotripe}" ></div><script Src= "//cdn.bootcss.com/vue/1.0.26/vue.js" ></script><script> new Vue ({el: ' #example ', data: {isripe:true, Isnotripe:false}}) </script>

The above code is rendered as:

650) this.width=650; "src=" Http://s3.51cto.com/wyfs02/M00/8A/8E/wKiom1gz6THhJdekAAAfXw7Hmg0831.png "title=" Qq20161122144343.png "alt=" Wkiom1gz6thhjdekaaafxw7hmg0831.png "/>

When Isripe and Isnotripe change, the class list is updated accordingly. For example, if Isnotripe becomes true, then the class list is rendered as "Static orange pear". (In general,only one class in the V-bind:class bound object will take effect, depending on the user's own settings )

Note: Although you can bind class with the {{}} tag, such as class = "{{className}}", this is not recommended and V-bind:class mixed

We can also directly bind an object in the data, the code is as follows:

<div id= "Example" v-bind:class= "fruit" ></div><script src= "//cdn.bootcss.com/vue/1.0.26/vue.js" > </script><script> New Vue ({el: ' #example ', data:{fruit:{' orange ': True, ' pear ': false}}) </script>

You can also bind a computed property of a returned object here, which is a common and powerful pattern to see a sample code:

<div id= "Example"  v-bind:class= "Classobject" ></div><script src= "// Cdn.bootcss.com/vue/1.0.26/vue.js "></script><script>    new vue ({         el: ' #example ',         data: {            age: 4,             member: 6000         },        computed:{             classobject:function () {                 return {                      ' Orange ': this.age>3?true: False,                     ' large ': this.member>1000? true:false                }             }         }    }) </script>

Render as:

<div id= "Example" class= "Orange large" ></div>

2. Array syntax

We can pass an array to V-bind:class to apply a class list:

<div id= "Example" v-bind:class= "[Activeclass, Errorclass]" ></div><script src= "//cdn.bootcss.com/vue /1.0.26/vue.js "></script><script> New Vue ({el: ' #example ', data:{activeclass: ' Active ', Errorclass: ' Text-danger '}}) </script>

Render as:

650) this.width=650; "src=" Http://s4.51cto.com/wyfs02/M02/8A/8B/wKioL1gz7r_z9h8iAAAVdY5vj8E328.png "title=" Qq20161122150701.png "alt=" Wkiol1gz7r_z9h8iaaavdy5vj8e328.png "/>

If you want to toggle the class in the list based on the criteria, you can use a ternary expression with the following code:

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

This example always adds Errorclass, but only when isActive is true Activeclass

However, this is tedious to write when there are multiple criteria class. In Vue.js 1.0.19 and later versions, object syntax can be used in array syntax. Examples are as follows:

<div id= "Example" v-bind:class= "[Didihandsome, {didiorange:isripe, didipear:isnotripe}]" ></div>

3. With components

If the class attribute is used on a custom component, these classes are added to the component's root element, and the existing class on the root element will not be overwritten

Look at the sample code:

<div id= "Example" > <my-component class= "foo Boo" ></my-component></div><script src= "// Cdn.bootcss.com/vue/1.0.26/vue.js "></script><script> vue.component (' my-component ', {Template: ' <    ;p class= "bar baz" >Hi</p> '}); New Vue ({el: ' #example '}) </script>

Render as:

650) this.width=650; "src=" Http://s3.51cto.com/wyfs02/M00/8A/8F/wKiom1gz86SgZ246AAAWw5g5VZY066.png "title=" Qq20161122152804.png "alt=" Wkiom1gz86sgz246aaaww5g5vzy066.png "/>

This also applies to binding class, looking at a sample code:

<div id= "Example" > <my-component v-bind:class= "{' Active ': isActive}" ></my-component></div> <script src= "//cdn.bootcss.com/vue/1.0.26/vue.js" ></script><script> vue.component ('    My-component ', {Template: ' <p class= ' bar baz ' >Hi</p> '}); New Vue ({el: ' #example ', data:{Isactive:true}}) </script>

When IsActive is true, the code is rendered as:

650) this.width=650; "src=" Http://s3.51cto.com/wyfs02/M01/8A/8F/wKiom1gz9cGjXFDdAAATUOzpiaU420.png "title=" Qq20161122153720.png "alt=" Wkiom1gz9cgjxfddaaatuozpiau420.png "/>

Binding inline styles

1. Object syntax

V-bind:style's object syntax is very intuitive-looking very much like CSS, it's actually a JavaScript object. CSS property names can be named (kebab-case) with the Hump (CamelCase) or short-cross:

<div id= "Example" v-bind:style= "{color:activecolor, fontsize:fontsize+ ' px '}" >hello world!</div><        Script src= "//cdn.bootcss.com/vue/1.0.26/vue.js" ></script><script> new Vue ({el: ' #example ', data:{activecolor: ' Red ', fontsize:30}} </script>

Page effect:

650) this.width=650; "src=" Http://s5.51cto.com/wyfs02/M02/8A/8C/wKioL1gz9wqww4_mAABEEQdXD9A964.png "title=" Qq20161122154222.png "alt=" Wkiol1gz9wqww4_maabeeqdxd9a964.png "/>

It is usually better to bind directly to a style object, to make the template clearer, and the code example is as follows:

<div id= "Example" v-bind:style= "Styleobject" >hello world!</div><script src= "//cdn.bootcss.com/vue/                1.0.26/vue.js "></script><script> New Vue ({el: ' #example ', data:{styleobject:{ Color: ' Red ', fontSize: ' 30px '}}) </script>

<div id= "Example"  v-bind:style= "Styleobject" >hello world!</div><script src= "//cdn.bootcss.com/vue/1.0.26/vue.js" ></script><script>    new vue ({         el: ' #example ',         data:{            age:4,             member:6000        },         computed:{             styleobject:function () {                 return {                     color: this.age > 3 ?  ' Orange '  :  ' gReen ',                     fontSize: this.member > 1000 ?  ' 20px '  :  ' 10px '                  }             }        }     }) </script>

650) this.width=650; "src=" Http://s5.51cto.com/wyfs02/M00/8A/90/wKiom1gz-WbhxdWBAABh8BamLlc288.png "title=" Qq20161122155242.png "alt=" Wkiom1gz-wbhxdwbaabh8bamllc288.png "/>

2. Array syntax

The V-bind:style array syntax allows you to apply multiple style objects to an element:

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

3. Automatically add prefixes

When V-bind:style uses CSS properties that require a specific prefix, such as transform, Vue.js automatically detects and adds the corresponding prefix.

In general, the browser private prefix includes Firefox's-moz-,ie-ms-,safari and Chrome's-webkit-,opera-o-, but Vue.js adds only the previous three prefixes. You need to pay attention here.

This article is from the "Dapengtalk" blog, make sure to keep this source http://dapengtalk.blog.51cto.com/11549574/1875451

Vue.js class and style bindings