HTML-style binding is nothing more than the binding of Class and Style. The native binding form can still be used when using Vue, but since Vue is used, it is recommended to follow the grammatical specification of Vue.
I. Binding HTML Class
1.1 Object Grammar
As we said before, the way to bind attributes in html is to use [v-bind], so is class binding.
<body> <div id="app"> <div v-bind:class="{ active: isActive }"></div> </div> </body>
In the code above, we use [v-bind] to bind an object to class, where the activity is the name of the class, and whether the style takes effect depends on whether the isActive is a true value.
<body> <div id="app"> <div v-bind:class="{ active: isActive,important:isport }"></div> <!-- <div class="active"></div> --> </div> </body> <script> let vm = new Vue({ el: "#app", data: { isActive: true, isport: false, } }) </script>
In the above code, we have bound several class es for an html, but only the active is valid because the isport value is false. With this grammar, I can directly control which styles are valid by controlling the data.
[In attribute binding, we can use expressions or compute attributes]
<body> <div id="app"> <div v-bind:class="getClass()"></div> <!-- <div class="active"></div> --> </div> </body> <script> let vm = new Vue({ el: "#app", data: { isActive: true, isport: false, }, methods: { getClass() { return { active: this.isActive, important: this.isport } } } }) </script>
In the code above, we use expressions in class binding, which are calls to a function in which we can define more complex style logic and style lists.
<body> <div id="app"> <div v-bind:class="classList"></div> <!-- <div class="active"></div> --> </div> </body> <script> let vm = new Vue({ el: "#app", data: { isActive: true, isport: false, }, computed: { classList() { return { active: this.isActive, important: this.isport } } } }) </script>
In the code above, we use the [Computing attributes] Similarly, a style object is defined. In computational attribute logic, we can also define more complex style lists. With expressions and computational attributes, our style binding provides a more powerful function.
1.2 Array Grammar
The grammar of the object is introduced above, which can be said to be very strong. Then I'll sort out how to write the array binding style.
<body> <div id="app"> <div v-bind:class="[isActive,isport]"></div> <!-- <div class="active important"></div> --> </div> </body> <script> let vm = new Vue({ el: "#app", data: { isActive: "active", isport: "important", } }) </script>
The above code defines and binds two class attributes by means of arrays, which actually constitutes the mapping between the attribute value of [data] and the style name.
We can also use expressions in array grammar, citing an example from the official website.
<div v-bind:class="[isActive ? activeClass : '', errorClass]">
ErorClass always exists in the class in the code above, but whether activeClass is added depends on whether isActive is a true value.
[Summary!! ] Class binding always feels that the form of arrays is too cumbersome. We need to define many mapping attributes, so from a concise point of view, it is recommended to use the form of objects.
1.3 Component Binding Class
If you know the components, look at them and skip over the ones you don't know.
When we add classes to a component, all classes are added to the component's [root element], and the existing classes on the root element will not be overwritten.
Let's first define a component
Vue.component('hello', { template: ` <div class="root"> <h1>Hello</h1> </div> ` })
Next apply the component and add Class
<body> <div id="app"> <hello class="later"></hello> </div> </body> <script> let vm = new Vue({ el: "#app", }) </script>
The rendering results are as follows
<body> <div id="app"> <div class="root later"> <h1>Hello</h1> </div> </div> </body>
In the above code, later is added to the root node of the hello component, where we bind with the native Class. Then we change to the binding form of Vue, and we will find that the effect is the same, and it is also bound to the root node.
<body> <div id="app"> <hello :class="{later:isLater}"></hello> </div> </body> <script> let vm = new Vue({ el: "#app", data: { isLater: true } }) </script>
Binding Inline Styles
The binding of Class is introduced above, so let me summarize the binding of inline style.
2.1 Object Grammar
In Class binding, the attribute of the object is the Class name, and the attribute value is used to determine whether the Class is valid; in inline style binding, the attribute is the [style name], and the attribute value is the [style value].
<body> <div id="app"> <h1 :style="{color:colorVal,fontSize:sizeVal}">BLUE</h1> <!-- <h1 style="color: blue; font-size: 20px;">BLUE</h1> --> </div> </body> <script> let vm = new Vue({ el: "#app", data: { colorVal: 'blue', sizeVal:"20px" } }) </script>
The above code binds style objects directly to HTML elements, and the name of short horizon segmentation is changed to the name of hump. This requirement in Vue 1.0 is more stringent, but the naming rule of short horizon is supported in Vue 2.0.
Above we used it when Binding Class [Computing attributes] And in the form of expressions, let's play with the inline style.
<body> <div id="app"> <h1 :style="styleList">BLUE</h1> <!-- <h1 style="color: blue; font-size: 20px;">BLUE</h1> --> </div> </body> <script> let vm = new Vue({ el: "#app", data: { colorVal: 'blue', sizeVal: "20px" }, computed: { styleList() { return { color: this.colorVal, fontSize: this.sizeVal } } } }) </script>
The above code uses [Computing attributes] Returns an object for inline style, and the expression is not demonstrated, basically the same as lass binding.
2.2 Array Grammar
The array syntax of inline style is actually to use each style object for an HTML element, and the array is an object by object.
<body> <div id="app"> <h1 :style="[styleList,anotherList]">BLUE</h1> <!-- <h1 style=" color: blue; font-size: 20px; font-weight: bold; background-color: gray;">BLUE</h1> --> </div> </body> <script> let vm = new Vue({ el: "#app", data: { colorVal: 'blue', sizeVal: "20px", backgroundColor: 'gray', fontWeight: "bold" }, computed: { styleList() { return { color: this.colorVal, fontSize: this.sizeVal } }, anotherList() { return { backgroundColor: this.backgroundColor, fontWeight: this.fontWeight } } } }) </script>
The above code defines two [Computing attributes] Returns two style objects, then binds them to an inline style array, and finally parses them into comments. I always feel that binding in array form is troublesome. I don't like binding in array anyway, but it's useful when separating style objects.