广告
返回顶部
首页 > 资讯 > 前端开发 > JavaScript >Vuebody样式修改方式
  • 914
分享到

Vuebody样式修改方式

Vuebody样式修改Vuebody样式Vue修改body样式 2023-01-17 18:01:32 914人浏览 八月长安
摘要

目录Vue body样式修改解决方式vue给body单独设置样式总结Vue body样式修改 这篇文章记录自己再写项目是遇到的App.vue显示问题。 问题:查看页面时,发现有8px

Vue body样式修改

这篇文章记录自己再写项目是遇到的App.vue显示问题。

问题:查看页面时,发现有8px的margin,看着很不爽,想要去掉这个margin。

修改前:直接上图


解决方式

通过beforeCreate函数设置App.vue中body的样式

export default {
  beforeCreate() {
    document.querySelector('body').setAttribute('style', 'margin:0;')
  },
}

可以明显看出,外边距已经没有了,over。

vue给body单独设置样式

在vue项目中,有时候会需要给单独的页面中的body设置样式,下面是两种方法

1.在beforeCreate()中给body添加属性

  beforeCreate() {
            document.querySelector('body').setAttribute('style', 'background-color:#fffcf5;')
        },

2.给最外层的div添加个类名,然后处理

<template>
    <div class="body-bg"></div>
</template>
<style scoped lang="sCSS">

    .body-bg {
        position: absolute;
        width: 100%;
        height: 100%;
        top: 0;
        left: 0;
        overflow-y: auto;
        background-color: #fff;
    }
</style>

目前就知道这两种,以后看到了再补充吧

总结

以上为个人经验,希望能给大家一个参考,也希望大家多多支持编程网。

--结束END--

本文标题: Vuebody样式修改方式

本文链接: https://www.lsjlt.com/news/178029.html(转载时请注明来源链接)

有问题或投稿请发送至: 邮箱/279061341@qq.com    QQ/279061341

本篇文章演示代码以及资料文档资料下载

下载Word文档到电脑,方便收藏和打印~

下载Word文档
猜你喜欢
  • Vuebody样式修改方式
    目录Vue body样式修改解决方式vue给body单独设置样式总结Vue body样式修改 这篇文章记录自己再写项目是遇到的App.vue显示问题。 问题:查看页面时,发现有8px...
    99+
    2023-01-17
    Vue body样式修改 Vue body样式 Vue修改body样式
  • css input样式的修改方法
    这篇文章主要介绍css input样式的修改方法,文中介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们一定要看完!css input样式修改的方法:1、利用伪类元素改变radio样式;2、利用label指向input,然后通过改变lab...
    99+
    2023-06-14
  • Android修改Dialog样式的方法
    目录一、Dialog源码解析1.1 new AlertDialog.Builder(this).create()1.2 AlertController二、修改Dialog样式2.1 ...
    99+
    2022-11-12
  • 怎么修改css样式
    这篇文章将为大家详细讲解有关怎么修改css样式,小编觉得挺实用的,因此分享给大家做个参考,希望大家阅读完这篇文章后可以有所收获。css的三种引入方式1.行内样式,最直接最简单的一种,直接对HTML标签使用style=""...
    99+
    2023-06-14
  • 修改Android App样式风格的方法
    android中可以自定义主题和风格。风格,也就是style,我们可以将一些统一的属性拿出来,比方说,长,宽,字体大小,字体颜色等等。可以在res/values目录下新建一个s...
    99+
    2022-06-06
    方法 app Android
  • vue修改滚动条样式的方法
    目录首先要知道,修改滚动条样式,利用伪元素-webkit-scrollbar。 注意, ::-webkit-scrollbar仅仅支持WebKit的浏览器(例如谷歌Chrome、苹果...
    99+
    2022-11-12
  • vant如何修改placeholder样式
    目录如何修改placeholder样式设置placeholder属性样式的多种写法第一种最简单的写法第二种写法第三种写法如何修改placeholder样式 ::-webkit-inp...
    99+
    2022-11-13
  • jquery怎么修改css样式
    JQuery 是一款 JavaScript 库,它的目标是简化 HTML 文档的遍历、事件处理、动画和 Ajax 操作等操作。在这里我们将重点介绍 JQuery 如何用来修改 CSS 样式。首先,让我们来看一下 JQuery 如何获取 DO...
    99+
    2023-05-14
  • javascript如何修改css样式
    这篇文章给大家分享的是有关javascript如何修改css样式的内容。小编觉得挺实用的,因此分享给大家做个参考,一起跟随小编过来看看吧。 修改方法:1、用“元素.style.属...
    99+
    2022-10-19
  • jquery如何修改css样式
    使用jquery修改css样式的方法:1.新建html项目,引入jquery;2.创建div标签,设置样式;3.使用css()方法修改样式;具体步骤如下:首先,新建一个html项目,并在项目中引入jquery;<script type...
    99+
    2022-10-22
  • html5 date样式怎么修改
    本教程操作环境:Windows10系统、HTML5版、DELL G3电脑html5 date样式怎么修改?HTML5中input[type='date']自定义样式HTML5提供了日历控件功能,缩减了开发时间,但有时它的样式...
    99+
    2023-05-14
    html5
  • javascript如何修改style样式
    小编给大家分享一下javascript如何修改style样式,相信大部分人都还不怎么了解,因此分享这篇文章给大家参考一下,希望大家阅读完这篇文章后大有收获,下面让我们一起去了解一下吧!JavaScript是什么JavaScript是一种直译...
    99+
    2023-06-14
  • vant怎么修改placeholder样式
    这篇文章主要介绍“vant怎么修改placeholder样式”的相关知识,小编通过实际案例向大家展示操作过程,操作方法简单快捷,实用性强,希望这篇“vant怎么修改placeholder样式”文章能帮助大家解决问题。如何修改placehol...
    99+
    2023-06-30
  • js怎么修改css样式
    这篇文章给大家分享的是有关js怎么修改css样式的内容。小编觉得挺实用的,因此分享给大家做个参考,一起跟随小编过来看看吧。JavaScript是什么JS是JavaScript的简称,它是一种直译式的脚本语言,其解释器被称为JavaScrip...
    99+
    2023-06-14
  • html5 date样式如何修改
    这篇“html5 date样式如何修改”文章的知识点大部分人都不太理解,所以小编给大家总结了以下内容,内容详细,步骤清晰,具有一定的借鉴价值,希望大家阅读完这篇文章能有所收获,下面我们一起来看看这篇“html5 date样式如何修改”文章吧...
    99+
    2023-07-05
  • dedecms 5.6 分页样式代码修改方法
    例如:文章分页问题,每个版本都存在问题但一直也没能很好的解决,随着官方最新的版本dede v5.6的发布,但升级后发现文章分页全部变成竖排了,经多方查找终于解决方法了,现特放出来分享一下 解决方法是:找到/include...
    99+
    2022-06-12
    dedecms 分页样式
  • jQuery修改CSS样式的方法是什么
    这篇文章主要介绍了jQuery修改CSS样式的方法是什么的相关知识,内容详细易懂,操作简单快捷,具有一定借鉴价值,相信大家阅读完这篇jQuery修改CSS样式的方法是什么文章都会有所收获,下面我们一起来看看吧。一、基本概念在使用jQuery...
    99+
    2023-07-05
  • jquery修改css样式的方法有哪些
    jQuery修改CSS样式的方法有以下几种:1. 使用css()方法:可以在括号内指定要修改的CSS属性和属性值。例如:`$(sel...
    99+
    2023-08-09
    jquery css
  • vue对插件(iview,elementui,treeselect)样式的局部修改方式
    目录(iview,elementui,treeselect)样式的局部修改学习描述具体方法vue+iview 样式穿透-修改第三方插件样式修改第三方插件样式(iview,elemen...
    99+
    2022-11-13
  • 关于React动态修改元素样式的三种方式
    目录React动态修改元素样式1.借助ref动态修改样式2.通过动态控制状态的变化修改元素的样式(两种方式)3.通过在DOM中使用JS代码(三元运算符)React样式冲突问题css-...
    99+
    2022-11-13
    React动态修改样式 React元素样式 元素样式动态修改
软考高级职称资格查询
编程网,编程工程师的家园,是目前国内优秀的开源技术社区之一,形成了由开源软件库、代码分享、资讯、协作翻译、讨论区和博客等几大频道内容,为IT开发者提供了一个发现、使用、并交流开源技术的平台。
  • 官方手机版

  • 微信公众号

  • 商务合作