如何为 vue3 main div #app 提供动态类？

Posted 2023-02-22

【中文标题】如何为 vue3 main div #app 提供动态类？

【英文标题】：How can I give a dynamic class to vue3 main div #app?

【发布时间】：2021-01-16 15:07:05

【问题描述】：

我正在尝试为我的 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>

【问题讨论】：

是什么阻止你这样做？

在 Vue3 中，当您创建应用程序时，它会创建带有 app id 的主 标签。但是您无法在代码中访问它，因为它是在构建过程中创建的。 @Daniel_Knights

哦，我明白了。很高兴知道

【参考方案1】：

很遗憾，您无法直接使用 Vue 来做到这一点。

在根元素上定义:class="myClass" 不会是反应式的。

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

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

如果您希望它具有反应性，您可以使用 computed 或 watch 根据其他一些参数对其进行修改，但您需要提供更多上下文才能获得更多详细信息。

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

【参考方案2】：

您可以添加代表您的类的属性，然后使用 watch 使用 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>