Vue 动态改变css

两种方式动态改变css

目录

两种方式动态改变css

方式一：使用:class根据不同的条件切换css样式

方式二：使用:style动态给css中某样式赋值

---

方式一：使用:class根据不同的条件切换css样式

template中：

<span class="successOrError" :class="{success:isSuccess,error:!isSuccess}">成功</span>

data中：

data(){
    return{
        isSuccess:true
    }
}

css中：

<style lang="scss" scoped>
    .successOrError {
    font-size:14px;
    &.success {
        color:green;
    }
    &.error{
        color:red;
    }
}
</style>

方式二：使用:style动态给css中某样式赋值

template中

<span class="successOrError" :style="{'--font-color':"green"}">成功</span>

css中

<style lang="scss" scoped>
    .successOrError {
    font-size:14px;
    color:var(--font-color)
}
</style>