如何反应性地设置 <html> class

Question

我有 2 个主题：'light-theme'、'dark-theme' 我想根据我在 vuex 商店中的值设置 <html class=""> 。喜欢darkMode: true

我怎样才能像那样被动地设置 <html> class？

（使用 vue3）

Answer 1

根据Vue docs，有以下方法可以做到这一点。

1.Binding 对象

<div :class="{ 'active-class': isActive }"></div>

以上语法意味着 'active-class' class 的存在将由数据的真实性决定属性 isActive.

2.Binding 到数组

<div :class="[isActive ? activeClass : '', errorClass]"></div>

这将始终应用 errorClass，但 activeClass 仅在 isActive 为真时应用。

Answer 2

你可以使用简单的javascript。

只需添加一个按钮或切换主题更改，例如：

<button @click="changeTheme">Change Theme</button>

并在此组件内添加 changeTheme 方法 inside methods:

document.getElementsByTagName("html")[0].setAttribute( 'class', 'newThemeClass' );

或者直接将 watcher 添加到您的存储值中并根据它进行更改：

computed:{
    ...mapGetters(["yourGetterName"])
 },
watch: {
    darkMode(value) {
      document.getElementsByTagName("html")[0].setAttribute( 'class', value );
    },
  }

如何反应性地设置 <html> class

How to reactively set a <html> class

vue.js

vuex