给标签添加了动态样式，只要触发某个事件就会传入布尔值，实现样式改变？

站长

2024年07月04日 08:41 · 阅读数 7

<div class="content" :class="{ active:isCollapse }">
      <MyHeader @changeMenu="changeMenu" :isCollapse="!isCollapse"></MyHeader>

data () {
    return {
      isCollapse: false
    }
  },
  methods: {
    changeMenu () {
      this.isCollapse = !this.isCollapse
    }
  }

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

控制台：

<style>
#app .content {
    padding-left: 200px;
}

触发了也没改变内边距

解决了，写外边。不过为什么里面不生效

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

1个回答

test

2024-07-04

不要用后代选择器的写法。

要写成同级。

.content .active 当 .active 是 .content 后代元素时生效。

.content.active 当 .content 与 .active 在同一个元素上时生效。

同级的 scss写法：

.content {
  padding-left: 200px;

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

转化为 css：

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

这是后代选择器的写法：

.content {
  padding-left: 200px;

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

转换成 css，两者之间是后代选择器的关系。

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

适合作为回答的

不该作为回答的