动态变更标签样式的疑惑
在使用 vue.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 中动态变更标签样式无效？的详细内容，更多请关注php中文网其它相关文章！
每个人都需要一台速度更快、更稳定的 PC。随着时间的推移，垃圾文件、旧注册表数据和不必要的后台进程会占用资源并降低性能。幸运的是，许多工具可以让 Windows 保持平稳运行。
广告
收藏
收藏
收藏
Copyright 2014-2025 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号
344
