我怎样才能给 vue3 main div #app 一个动态的 class?
How can I give a dynamic class to vue3 main div #app?
我正在尝试为我的 vue3 应用程序的主 div 提供动态 class。
当我使用下面的命令创建应用程序时,它会创建一个主 div 标签,其 ID app
。我可以使用 css 更改样式,但由于页面中没有它,所以我无法动态更改 class。
创建应用程序的代码
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
),这样您就可以管理 class 属性。 (classList API上有addClass
、toggleClass
等几种方法)
如果您希望它具有反应性,您可以使用 computed
或 watch
根据其他参数修改它,但您需要提供更多上下文才能获得更多详细信息
如果可能(取决于 setup/need),您可以将应用程序嵌套在 div
的另一个级别,这样您就可以控制 class。
您可以添加代表您的 class 的 属性,然后使用 watch 使用 document.querySelector('#app').classList = [val]
更新您的根元素,我制作了以下示例来说明一个真实的工作示例,它是模式从暗变为亮 vice-versa,我添加了 属性 调用 mode
我使用按钮单击事件更改它然后我观察它更新根元素 class :
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>
我正在尝试为我的 vue3 应用程序的主 div 提供动态 class。
当我使用下面的命令创建应用程序时,它会创建一个主 div 标签,其 ID app
。我可以使用 css 更改样式,但由于页面中没有它,所以我无法动态更改 class。
创建应用程序的代码
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
),这样您就可以管理 class 属性。 (classList API上有addClass
、toggleClass
等几种方法)
如果您希望它具有反应性,您可以使用 computed
或 watch
根据其他参数修改它,但您需要提供更多上下文才能获得更多详细信息
如果可能(取决于 setup/need),您可以将应用程序嵌套在 div
的另一个级别,这样您就可以控制 class。
您可以添加代表您的 class 的 属性,然后使用 watch 使用 document.querySelector('#app').classList = [val]
更新您的根元素,我制作了以下示例来说明一个真实的工作示例,它是模式从暗变为亮 vice-versa,我添加了 属性 调用 mode
我使用按钮单击事件更改它然后我观察它更新根元素 class :
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>