动态切换样式

方法一：使用自定义样式

1.定义：

带有前缀 -- 的属性名，比如 --example--name，表示的是带有值的自定义属性，其可以通过 var()函数在全文档范围内复用的。

定义方法：

可以创建一个css文件，然后在app.vue中引用或者在main.js中引用。然后代码如下

/* 定义全局的css变量 */
:root {
  /* 背景色 */
  --page_bg: #999;
  /* 按钮颜色 */
  --button_color: blue;
}

备注： 自定义属性名区分大小写——--my-color 会被视为与 --My-color 不同的自定义属性。

2.使用：

在页面中用var()使用如下：

 background: var(--page_bg);

3.修改：

document.documentElementc.style.setProperty('--page_bg', color)

方法二：切换已定义好的css文件

1.在public中配置css文件。