如何为vue3主div #app提供动态类？ 我想做什么

如何解决如何为vue3主div #app提供动态类？ 我想做什么

我正在尝试为我的vue3应用的主div提供动态类。

当我使用下面的命令创建应用程序时，它会创建一个主div标签，其ID为app。我可以使用CSS更改样式，但是由于页面中没有样式，所以无法动态更改类。

创建应用的代码

const app = createApp(App)
app.use(store)
app.use(router)
app.mount('#app')

我想做什么

<div id="app" :class="myClass"></div>

解决方法

不幸的是，您将无法直接通过Vue做到这一点。

在根元素上定义:class="myClass"不会起作用。

...但是您可以手动处理。

您可以在方法中使用this.$el.parentElement（例如mounted），这将允许您管理类属性。 （classList API上有addClass，toggleClass等几种方法）

如果您希望它是反应性的，则可以使用computed或watch来基于其他参数进行修改，但是您需要提供更多的上下文以获取更多信息

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

,

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

const {
  createApp
} = Vue;
const App = {
  data() {
    return {
      mode: 'is-light'
    }
  },watch: {
    mode(val) {
      document.querySelector('#app').classList = [val]
    }
  }
}
const app = createApp(App)
app.mount('#app')

#app {
  padding: 12px;
  border-radius: 4px
}

.is-dark {
  background: #454545;
  color: white
}

.is-light {
  background: #f9f9f9;
  color: #222
}

button {
  -webkit-transition: all .2s ease;
  transition: all .2s ease;
  padding: 10px;
  border: 0;
  border-radius: 6px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
  color: #fff;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  background: transparent;
  background: #4545ee
}

<script src="https://unpkg.com/vue@3.0.0-rc.11/dist/vue.global.prod.js"></script>

<div id="app" class="is-dark">

  <button @click="mode= 'is-dark'" class="is-dark">
Dark
</button>

  <button @click="mode= 'is-light'" class="is-light">
Light
</button>
  <p>
    Lorem,ipsum dolor sit amet consectetur adipisicing elit. Corrupti quidem aspernatur provident fugit impedit esse itaque iusto iure voluptatem eaque?
  </p>

</div>