为什么 Vue.js 中动态变更标签样式无效？

动态变更标签样式的疑惑

在使用 vue.js 时，遇到一个问题：为一个标签添加了动态样式，基于某个事件触发后传入一个布尔值，理论上样式会发生改变。然而，触发事件后，样式却没有发生变化。

问题代码如下：

<code>
<div class="content" :class="{ active:iscollapse }">
    <myheader @changemenu="changemenu" :iscollapse="!iscollapse"></myheader>
</code>
<code>
data () {
    return {
        iscollapse: false
    }
},
methods: {
    changemenu () {
        this.iscollapse = !this.iscollapse
    }
}
</code>
<code>
.content {
   padding-left: 200px;
   .active {
       padding-left: 65px;
   }
}
</code>
控制台输出了以下内容：
<style>
#app .content {
    padding-left: 200px;
}
问题源自后代选择器的写法，应该将样式写成同级，即：
<code>
.content {
    padding-left: 200px;
}
.active {
    padding-left: 65px;
}
</code>
在使用后代选择器时（".content .active"），样式只会在 ".active" 是 ".content" 后代元素时生效。而在同级选择器（".content.active"）中，".active" 与 ".content" 将出现在同一个元素上，才能让样式生效。
以上就是为什么 Vue.js 中动态变更标签样式无效？的详细内容，更多请关注其它相关文章！