淘先锋技术网

首页 1 2 3 4 5 6 7

当我们使用Vue进行页面开发时,常常涉及到对body高度的设置。那么如何在Vue中设置body的高度呢?

最常见的方法是在App.vue中对body的高度进行设置。以设置body的高度等于视口高度为例:

export default {
created () {
document.body.style.height = window.innerHeight + 'px'
}
}

注意,在这个方法中,需要在created钩子函数里设置body的高度。因为在此时,Vue的实例已经创建完成且DOM已经生成。如果在mounted钩子函数中设置body的高度,有可能出现页面渲染完成后才进行设置的问题。

当然,也可以使用第三方库vue-body-class来设置body的样式:

import Vue from 'vue'
import VueBodyClass from 'vue-body-class'
Vue.use(VueBodyClass, {
// options
classNames: {
// classNames
}
})

通过这种方式,可以在Vue中方便地对body进行样式设置,不需要手动操作DOM,而且可以轻松地配置多个样式名称。

以上是在Vue中设置body高度的两种方法。需要注意的是,无论是使用Javascript还是vue-body-class,都需要在页面渲染完成时进行设置,否则可能会出现样式不正确的问题。