vue动态给样式赋值v-bind:class=‘‘

最新推荐文章于 2024-05-15 10:50:59 发布

bamboolm

最新推荐文章于 2024-05-15 10:50:59 发布

阅读量1.4k

点赞数

文章标签： vue.js elementui javascript

本文链接：https://blog.csdn.net/bamboolm/article/details/122596626

版权

写了两年的vue，很少给样式赋值，今天遇见了，总结下自己的成果

第一种：要是两种样式切换，写个三等表达式，然后计算属性，即可，上代码：

<div :class='isOk?classA:classB'>
</div>
<button @click="isOk=!isOk"  style="background-color: #473d31;color: white;">XXXX
</button>

data() {
    return {
        isOk: true,
    }
},
computed: {
    classA() {
        return 'blue'
    },
    classB() {
        return 'gold'
    }
},

.blue {
        height: 100px;
        background-image: url('~@/assets/header_bg.png');
        background-repeat: no-repeat;
        background-size: 100% 100%;
    }

.gold {
height: 100px;
background-image: url('~@/assets/header_bg_gold.png');
background-repeat: no-repeat;
background-size: 100% 100%;
}
第二种就是多种样式的切换，直接上代码：

<div :class="isOk"></div>

computed: {
    isOk() {
        if(this.$root.backgroundColor == '1' ){  //全局定义变量，改变的时候切换样式
            return 'top'
        }else if(this.$root.backgroundColor == '2'){
            return 'top1'
        }else if(this.$root.backgroundColor == '3'){
            return 'top2'
        }else if(this.$root.backgroundColor == '4'){
            return 'top3'
        }
    },
},

.top {
    background-image: url('~@/assets/frame1.png');
    background-repeat: no-repeat;
    background-size: 100%;
}

.top1 {
    background-image: url('~@/assets/frame3.png');
    background-repeat: no-repeat;
    background-size: 100%;
}

.top2 {
    background-image: url('~@/assets/frame2.png');
    background-repeat: no-repeat;
    background-size: 100%;
}
.top3 {
    background-image: url('~@/assets/frame2.png');
    background-repeat: no-repeat;
    background-size: 100%;
}