[英]How can I give a dynamic class to vue3 main div #app?
I am trying to give a dynamic class to my vue3 app's main div.我正在尝试为我的 vue3 应用程序的主 div 提供一个动态类。
When I create the app with the commands down below, it creates a main div tag which has an id app
.当我使用下面的命令创建应用程序时,它会创建一个主 div 标签,其中包含一个 id
app
。 I can change the styling with css but since I don't have it in the page I can not change class dynamically.我可以使用 css 更改样式,但由于页面中没有它,因此无法动态更改类。
Code to create the app创建应用程序的代码
const app = createApp(App)
app.use(store)
app.use(router)
app.mount('#app')
<div id="app" :class="myClass"></div>
Unfortunately, you're not going to be able to do that with Vue directly.不幸的是,你不能直接用 Vue 做到这一点。
Defining :class="myClass"
on root element will not be reactive.在根元素上定义
:class="myClass"
不会是被动的。
...but you can handle that manually. ...但您可以手动处理。
you can use this.$el.parentElement
in a method (like mounted
) and that will allow you to manage the class attribute.您可以在方法中使用
this.$el.parentElement
(例如mounted
),这将允许您管理类属性。 (there are several methods like addClass
, toggleClass
on the classList API ) (在classList API上有几种方法,如
addClass
、 toggleClass
)
If you want that to be reactive, you can use a computed
or watch
to modify that based on some other parameter, but you'd need to provide more context to have more detail on that.如果您希望它具有反应性,您可以使用
computed
或watch
来根据其他一些参数对其进行修改,但您需要提供更多上下文以了解更多详细信息。
If possible though (depends on the setup/need), you could nest the application in another level of div
, so you can control the class.如果可能的话(取决于设置/需要),您可以将应用程序嵌套在另一个级别的
div
,以便您可以控制该类。
You could add property that represent your class then use watch to update the your root element using document.querySelector('#app').classList = [val]
, i made the following example that illustrate a real work example which is the mode change from dark to light and vice-versa, i added property called mode
and i change it using a button click event then i watch it to update the root element class :您可以添加代表您的类的属性,然后使用 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>
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.