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

动态变更标签样式的疑惑

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

问题代码如下：

<pre class="brush:php;toolbar:false"><code>
<div class="content" :class="{ active:iscollapse }">
    <myheader @changemenu="changemenu" :iscollapse="!iscollapse"></myheader>
</code>

登录后复制

<pre class="brush:php;toolbar:false"><code>
data () {
    return {
        iscollapse: false
    }
},
methods: {
    changemenu () {
        this.iscollapse = !this.iscollapse
    }
}
</code>

登录后复制

<pre class="brush:php;toolbar:false"><code>
.content {
   padding-left: 200px;
   .active {
       padding-left: 65px;
   }
}
</code>

登录后复制

控制台输出了以下内容：

立即学习“”；

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

登录后复制

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

<pre class="brush:php;toolbar:false"><code>
.content {
    padding-left: 200px;
}
.active {
    padding-left: 65px;
}
</code>

登录后复制

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

以上就是为什么 Vue.js 中动态变更标签样式无效？的详细内容，更多请关注GTHOST其它相关文章！