写了两年的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%; }