vue通过class绑定来控制显示不同图片

1.HTML

<div class="header" :class="{'bg1':header1,'bg2':header2}">

2.style

<style lang="scss" scoped>
@import './DataCenterStyle.scss';
.bg1 {
  background-image: url('../../assets/images/bigScreen/top.png');
}
.bg2 {
  background-image: url('../../assets/images/bigScreen/top.lxh.png');
}
</style>

3.data中声明

  data() {
    this.intervalId = null;
    return {
      header1:true,
      header2:false,
   }


    const { name } = this.$store.state.userInfo;
    if (name == '1') {
      this.header1 = false,
        this.header2 = true;
    } else if (name == "2") {
      this.header3 = true;
    }