<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;
}
不要用后代选择器的写法。
要写成同级。
.content .active
当.active
是.content
后代元素时生效。.content.active
当.content
与.active
在同一个元素上时生效。同级的 scss写法:
转化为 css:
这是后代选择器的写法:
转换成 css,两者之间是后代选择器的关系。