动态添加样式实现事件操作样式改变
使用 vue.js 实现了一个带有动态样式的标签，目的是当触发某个事件时，根据传入的布尔值来改变样式。
<div class="content" :class="{ active:iscollapse }">
<myheader @changemenu="changemenu" :iscollapse="!iscollapse"></myheader>
</div>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 .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; }后代选择器（scss 写法）：
.content {
padding-left: 200px;
.active {
padding-left: 65px;
}
}转换后的 css：
.content { padding-left: 200px; }
.content .active { padding-left: 65px; }注意：后代选择器不会对同一个元素生效，而是对后代元素生效。
