In projects, we often encounter dynamic debinding operations to switch different CSS styles. In combination with some situations encountered in our projects, we also refer to some documents and make the following summary for dynamic binding switching of styles:
The core idea of dynamic switching:
Use the vue instruction v-bind to achieve dynamic binding, so as to set different styles to switch ~
The biggest feature of vue is data-driven. It uses special syntax to "bind" the DOM to the underlying data. The DOM is kept synchronized with the data. Whenever the data changes, the DOM view will update and respond accordingly. It is precisely based on this feature that we can realize dynamic binding of class and style~
(You must fully understand the meaning of data-driven and encourage each other~)
Special Note:
1. v-bind specifically enhances it when dealing with class and style. The result type of an expression can be not only a string, but also an object and an array.
v-bind is used to bind properties and data, and its abbreviation is " : ", that is, v-bind:id === :id .
According to different project requirements and different implementation ideas, the following methods are summarized in a preliminary summary:
(People are welcome to add and make progress together~～)
class attribute binding
1. Three-eye element operator method:
<!--vueCode-->
<ul>
<li v-for="item in itemData" :key="item">
<i :class=" ? 'class_a' : 'class_b'"></i>
</li>
</ul>
<!-- CSSCode -->
.class_a,.class_b{
/*You can write some public styles here*/
}
.class_a{
/* Write the first style you need to set here*/
}
.class_b{
/* Write the second style you need to set here*/
}
2. Basic binding:
<!--vueCode-->
<div :class="{class_a:isActive}"></div>
<!-- Bloggers use it herevue-cliMake an example，Friends, please pay attention tovueThe difference -->
export default {
name: "test1",
data(){
return{
isActive:true
}
}
}
<!-- CSSCode -->
.class_a{
/* Write the style you need to set here*/
}
The above can be used to bind class styles based on the value of isACtive and dynamically judged.
Special Note:
1. The delimiter of vue is {{ }} by default. The string in the delimiter will be considered a data variable. Class can be set by class="{{ className }}". However, vue does not recommend this method mixed with the v-bind:class method, and you can only choose one of the two.
2. v-bind:class Although the way of binding variables in the class attribute cannot coexist, it can coexist with the native class feature, that is, a DOM tag allows the occurrence of native class and v-bind:class at the same time.
3. To avoid unnecessary problems, try not to use medium marks for the values written in data. You can use underscores. If you use medium marks in data, you need to add single quotes, otherwise an error will occur. Moreover, when used in v-bind, you also need to add single quotes. Adding single quotes does not recognize the data, and the default is true.
3. Multiple attributes can be passed in and dynamically switched multiple classes
<!--vueCode--> <div :class="{class_a:isActive,class_b:isActive_b}"></div>
4. Object binding
<!--vueCode-->
<div ：class="classObject"></div>
<!-- Bloggers use it herevue-cliMake an example，Friends, please pay attention tovueThe difference -->
export default {
name: "test1",
data(){
return{
classObject:{
class_a:true,
class_b:true
}
}
}
}
<!-- CSSCode -->
.class_a{
/* Write the first style you need to set here*/
}
.class_b{
/* Write the second style you need to set here*/
}
Special Note:
Here v-bind is directly bound by the object. It should be noted that the key names in the object should be consistent with the class style name.
5. Array binding
When the variables in the array change, dynamically update the class list
<!--vueCode-->
<div ：class="[classA,classB]"></div>
<!-- Bloggers use it herevue-cliMake an example，Friends, please pay attention tovueThe difference -->
export default {
name: "test1",
data(){
return{
classA:'class_a',
classB:'class_b'
}
}
}
<!-- CSSCode -->
.class_a{
/* Write the first style you need to set here*/
}
.class_b{
/* Write the second style you need to set here*/
}
6. Bind the calculated properties of the return object
Powerful and commonly used mode~
<!--vueCode-->
<div v-bind="classObject"></div>
<!-- Bloggers use it herevue-cliMake an example，Friends, please pay attention tovueThe difference -->
export default {
name: "test1",
data(){
return{
isActive:true
}
},
computed:{
classObject:function () {
return{
class_a:,
class_b:!
// Here you need to modify and fill in according to your own project situation }
}
}
}
<!-- CSSCode -->
.class_a{
/* Write the first style you need to set here*/
}
.class_b{
/* Write the second style you need to set here*/
}
Style attribute binding (inline)
1. Set styles directly
<!--vueCode-->
<div ：style="color：selectedColor,fontsize:fontSize + 'px'"></div>
<!-- Bloggers use it herevue-cliMake an example，Friends, please pay attention tovueThe difference -->
export default {
name: "test1",
data(){
return{
selectedColor:pink,
fontSize:20
// Pay attention to the consistency of the names before and after }
}
}
2. Objects can also be used
(Can refer to the above class)
<!--vueCode-->
<div ：style="styleObject"></div>
<!-- Bloggers use it herevue-cliMake an example，Friends, please pay attention tovueThe difference -->
export default {
name: "test1",
data(){
return{
styleObject{
selectedColor:pink,
fontSize:20
}
}
}
}
3. Use arrays
<!--vueCode-->
<div :style="[styleA,styleB]"></div>
<!-- Bloggers use it herevue-cliMake an example，Friends, please pay attention tovueThe difference -->
export default {
name: "test1",
data(){
return{
styleA:{
color:'red',
fontSize: '30px'
},
styleB:{
color:'green',
fontSize: '15px'
},
}
}
}
Friends can modify and call according to the above method and combine their own project situation. If you have any questions, please feel free to communicate.
The above is all the content of this article. I hope it will be helpful to everyone's study and I hope everyone will support me more.