Vue.js dynamic style: Why my inline style doesn't work, how to use CSS selector correctly?

Vue.js dynamic style and CSS selector: Solve the problem of inline style failure

In Vue.js development, dynamic adjustment of element style is a common requirement. This article analyzes a dynamic style application case, explains the cause of its failure and provides the correct solution.

question:

The developer tried to use Vue.js' class binding to change the inner margin of div.content element according to the boolean value iscollapse . When iscollapse is true , the inner margin should be 65px; otherwise it is 200px. However, the style in the initial code is invalid.

Initial code:

<div :class="{ active: iscollapse }" class="content">
  <myheader :iscollapse="!iscollapse"></myheader>
</div>

data() {
  return {
    iscollapse: false
  };
},
methods: {
  changemenu() {
    this.iscollapse = !this.iscollapse;
  }
}

 .content {
  padding-left: 200px;
  .active {
    padding-left: 65px;
  }
}

The root of the problem:

The problem is the wrong use of the CSS selector. The initial code uses the descendant selector .content .active , which means that .active class must be a child of .content element in order to apply the style. Vue.js' class binding directly adds active class to the .content element itself, not to create child elements. Therefore, the .content .active selector cannot match.

Correct way:

Combination .content.active should be used. This selector matches elements that have both .content and .active classes. When iscollapse is true , the .content element has both classes, thus applying padding-left: 65px style.

Improved CSS code (SCSS is recommended):

 .content {
  padding-left: 200px;
  &.active {
    padding-left: 65px;
  }
}

Compiled CSS code:

 .content { padding-left: 200px; }
.content.active { padding-left: 65px; }

Example of wrong nested selector:

 .content {
  padding-left: 200px;
  .active {
    padding-left: 65px;
  }
}

It is still a descendant selector after compilation, invalid:

 .content { padding-left: 200px; }
.content .active { padding-left: 65px; }

in conclusion:

A proper understanding of CSS selectors is essential for writing effective Vue.js dynamic styles. Use the selector correctly to ensure that the style is applied correctly.

The above is the detailed content of Vue.js dynamic style: Why my inline style doesn't work, how to use CSS selector correctly?. For more information, please follow other related articles on the PHP Chinese website!