vue中切换背景颜色。

在vue中，遇到不同页面需要不同的背景的情况

1.app.vue中声明样式

.page {
  background-color: #fff;
  padding: 11.7333vw 0 13.3333vw;
  padding-top: calc(11.7333vw + 24px);
}
.page1 {
   background: #f7fafc;
  // background-color: #fff;
  padding: 11.7333vw 0 13.3333vw;
  padding-top: calc(11.7333vw + 24px);
  min-height: 100vh;
  box-sizing: border-box;
}

2.在需要改变颜色页面添加以下代码

beforeCreate: function() {
    if (document.getElementsByClassName("page")[0])
      document.getElementsByClassName("page")[0].className = "page1";
  },
  beforeDestroy: function() {
    document.getElementsByClassName("page1")[0].className = "page";
  },
  mounted() {
    if (document.getElementsByClassName("page")[0]) {
      console.log(document.getElementsByClassName("page")[0]);
      document.getElementsByClassName("page")[0].className = "page1";
    }
  },