Vue.js dynamic style application: How to correctly modify element margins based on boolean values?

Vue.js dynamic style: cleverly use CSS selector to solve the problem of margin modification

In Vue.js development, dynamic adjustment of element style is a common requirement. This article will solve a problem about dynamically modifying element margins based on boolean values.

Problem description:

The developer tries to control the element's margins by binding the dynamic class name active . When the boolean iscollapse changes, the active class name should be added or removed, thereby changing padding-left of the element. However, the initial CSS code is invalid.

Code snippet:

Vue component code:

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

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

Invalid initial CSS code:

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

Problem analysis:

The problem is the use of CSS selector. The initial code uses the descendant selector .content .active , which requires that .active class must be a child element of .content to take effect. In fact, the active class directly acts on the .content element.

Solution:

The correct CSS selector should be a combination .content.active , ensuring that the style is applied only if .content element has active classes at the same time.

Correct CSS code:

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

Or, it's easier to use Sass:

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

The Sass code is equivalent to the above CSS code after compilation. Both ensure that padding-left: 65px style is applied only when the .content element has active classes at the same time, solving the problem of style failure caused by descendant selectors in the initial code.

The above is the detailed content of Vue.js dynamic style application: How to correctly modify element margins based on boolean values?. For more information, please follow other related articles on the PHP Chinese website!