vue 页面改body背景色

在 Vue 中改变 body 背景色，需要在根组件（一般是 App.vue）中使用 mounted 钩子函数，并通过 document.body.style.backgroundColor 来改变背景色，代码如下：

<template>
  <div>
    <!-- 页面内容 -->
  </div>
</template>

<script>
export default {
  name: 'App',
  mounted() {
    document.body.style.backgroundColor = '#f2f2f2'; // 修改背景色
  }
}
</script>

在 mounted 钩子函数中执行操作，可以保证在页面渲染完成后修改背景色。注意，直接在模板中使用 style 属性设置 body 的背景色是无效的，因为模板中的样式只会作用于组件内部的元素。

相关问题

vue2中给全局整个页面背景色

你可以在Vue2中使用CSS来给整个页面设置背景色。在你的`App.vue`组件中，可以添加以下样式：

<style>
body {
  background-color: #f0f0f0; /* 设置背景色 */
}
</style>

这将会给整个页面的背景色设置为`#f0f0f0`。如果你想要给页面添加背景图片，也可以使用CSS的`background-image`属性来实现。

vue 在组件中 修改element 插到body的样式

如果你想在 Vue 组件中修改 Element UI 中插入到 body 标签下的组件的样式，可以使用 `::v-deep` 或 `/deep/` 选择器来覆盖 Element UI 组件的样式。

例如，如果你想修改 `ElDialog` 组件中插入到 body 标签下的遮罩层的背景色，可以这样写：

::v-deep .v-modal {
  background-color: rgba(0, 0, 0, 0.5);
}

或者：

/deep/ .v-modal {
  background-color: rgba(0, 0, 0, 0.5);
}

这样就可以将 `ElDialog` 组件中插入到 body 标签下的遮罩层的背景色修改为半透明黑色了。需要注意的是，使用 `::v-deep` 或 `/deep/` 选择器可能会影响到其他组件，所以需要谨慎使用。