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

<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.8k
3 个回答

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

要写成同级。

.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; }

写里边等同于.content .active注意有空格,也就是他是后代选择器,即content的子孙中(不含自身)有active这个class的元素,而你模版中是同一元素,同一元素是要连在一起即.content.active没有空格。写成scss就是:

.content {
    &.active{

    }
}

scss文档多看看

你那种嵌套的写法,如果active类名所属元素是它的子元素是生效的,但是现在是同一个元素,写成平级就行

撰写回答
你尚未登录,登录后可以
  • 和开发者交流问题的细节
  • 关注并接收问题和回答的更新提醒
  • 参与内容的编辑和改进,让解决方法与时俱进
推荐问题