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

各位小伙伴们，大家好呀！看看今天我又给各位带来了什么文章？本文标题是《为什么 Vue.js 中动态变更标签样式无效？》，很明显是关于文章的文章哈哈哈，其中内容主要会涉及到等等，如果能帮到你，觉得很不错的话，欢迎各位多多点评和分享！

动态变更标签样式的疑惑

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

问题代码如下：

<pre><code>
&lt;div class=&quot;content&quot; :class=&quot;{ active:iscollapse }&quot;&gt;
    &lt;myheader @changemenu=&quot;changemenu&quot; :iscollapse=&quot;!iscollapse&quot;&gt;&lt;/myheader&gt;
</code></pre>

<pre><code>
data () {
    return {
        iscollapse: false
    }
},
methods: {
    changemenu () {
        this.iscollapse = !this.iscollapse
    }
}
</code></pre>

<pre><code>
.content {
   padding-left: 200px;
   .active {
       padding-left: 65px;
   }
}
</code></pre>

控制台输出了以下内容：

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

问题源自后代选择器的写法，应该将样式写成同级，即：

<pre><code>
.content {
    padding-left: 200px;
}
.active {
    padding-left: 65px;
}
</code></pre>

在使用后代选择器时（".content .active"），样式只会在 ".active" 是 ".content" 后代元素时生效。而在同级选择器（".content.active"）中，".active" 与 ".content" 将出现在同一个元素上，才能让样式生效。

今天关于《为什么 Vue.js 中动态变更标签样式无效？》的内容介绍就到此结束，如果有什么疑问或者建议，可以在golang学习网公众号下多多回复交流；文中若有不正之处，也希望回复留言以告知！