0

0

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

花韻仙語

花韻仙語

发布时间:2024-11-02 09:54:23

|

645人浏览过

|

来源于php中文网

原创

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

动态变更标签样式的疑惑

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

问题代码如下:


zuojiankuohaophpcndiv class="content" :class="{ active:iscollapse }"youjiankuohaophpcn
    zuojiankuohaophpcnmyheader @changemenu="changemenu" :iscollapse="!iscollapse"youjiankuohaophpcnzuojiankuohaophpcn/myheaderyoujiankuohaophpcn

data () {
    return {
        iscollapse: false
    }
},
methods: {
    changemenu () {
        this.iscollapse = !this.iscollapse
    }
}

.content {
   padding-left: 200px;
   .active {
       padding-left: 65px;
   }
}

控制台输出了以下内容:

uBrand
uBrand

一站式AI品牌创建平台,在线品牌设计,AI品牌策划,智能品牌营销;uBrand帮助创业者轻松打造个性品牌!

下载

立即学习前端免费学习笔记(深入)”;