Javascript 如何为vue3 main div应用程序提供动态类？

我正在尝试为我的vue3应用程序的主分区提供一个动态类

当我使用下面的命令创建应用程序时，它会创建一个主div标记，其中有一个id app。我可以用css改变样式，但是因为我在页面中没有它，所以我不能动态地改变类

创建应用程序的代码

const app=createAppApp app.usestore app.userouter app.mount'app' 我想做什么

---

不幸的是，您无法直接使用Vue实现这一点

根元素上的Defining:class=myClass将不是被动的

…但你可以手动处理

您可以在mounted之类的方法中使用此.el.parentElement，这将允许您管理class属性。上有几个方法，如addClass、toggleClass

如果您希望它是反应式的，您可以使用computed或watch根据其他参数修改它，但是您需要提供更多的上下文以获得更多的细节

---

如果可能的话，根据设置/需要，您可以将应用程序嵌套在另一个级别的div中，这样您就可以控制该类。

不幸的是，您无法直接使用Vue来实现这一点

根元素上的Defining:class=myClass将不是被动的

…但你可以手动处理

您可以在mounted之类的方法中使用此.el.parentElement，这将允许您管理class属性。上有几个方法，如addClass、toggleClass

如果您希望它是反应式的，您可以使用computed或watch根据其他参数修改它，但是您需要提供更多的上下文以获得更多的细节

---

如果可能，但取决于设置/需要，您可以将应用程序嵌套在另一个级别的div中，以便可以控制类。

您可以添加表示类的属性，然后使用watch使用document.querySelector'app.classList=[val]，我制作了下面的示例，演示了一个实际的工作示例，即模式从暗变亮，反之亦然。我添加了名为mode的属性，并使用按钮单击事件对其进行更改，然后观察它以更新根元素类：

常数{ createApp }=Vue； 常量应用={ 资料{ 返回{ 模式：“是光” } }, 观察：{ 摩德瓦尔{ document.querySelector'app'.classList=[val] } } } const app=createAppApp app.mount'app' 应用程序{ 填充：12px； 边界半径：4px } .天很黑{ 背景：4545； 颜色：白色 } .它很轻{ 背景：f9f9f9； 颜色：222 } 钮扣{ -webkit过渡：所有.2s轻松； 过渡：所有。2轻松； 填充：10px； 边界：0； 边界半径：6px； 光标：指针； 位置：相对位置； 溢出：隐藏； 颜色：fff； -webkit框大小：边框框； 框大小：边框框； 背景：透明； 背景：4545ee } 黑暗的 光 洛雷姆，伊普苏姆·多洛坐在一位杰出的领袖面前。腐败是一种有远见的行为，它阻碍了我们的自由？

---

您可以添加表示类的属性，然后使用watch使用document.querySelector'app.classList=[val]更新您的根元素，我制作了下面的示例来演示一个实际的工作示例，即模式从暗变为亮，反之亦然，我添加了名为mode的属性，并使用按钮单击事件对其进行了更改，然后我观察它以更新根元素类：

常数{ createApp }=Vue； 常量应用={ 资料{ 返回{ 模式：“是光” } }, 观察：{ 摩德瓦尔{ document.querySelector'app'.classList=[val] } } } const app=createAppApp app.mount'app' 应用程序{ 填充：12px； 边界半径：4px } .天很黑{ 背景：4545； 颜色：白色 } .它很轻{ 背景：f9f9f9； 颜色：222 } 钮扣{ -webkit过渡：所有.2s轻松； 过渡：所有。2轻松； 填充：10px； 边界：0； 边界半径：6px； 光标：指针； 位置：相对位置； 溢出：隐藏； 颜色：fff； -webkit框大小：边框框； 框大小：边框框； 背景：透明； 背景：4545ee } 黑暗的 光 洛雷姆，伊普苏姆·多洛坐在一位杰出的领袖面前。腐败是一种有远见的行为，它阻碍了我们的自由？

---

是什么阻止了您这样做？在Vue3中，当您创建应用程序时，它会创建带有应用程序id的主标记。但您无法在代码中找到它，因为它是在构建过程中创建的@丹尼尔·奈特索，我明白了。很高兴知道是什么阻止了你这么做？在Vue3中，当你创建应用时，它会创建带有应用id的主标记。但是你在代码中无法找到它，因为它是在构建过程中创建的@丹尼尔·奈特索，我明白了。很高兴知道