Vue body樣式修改方式
更新時間：2023年01月17日 15:02:17 作者：毛毛蟲嗚嗚
這篇文章主要介紹了Vue body樣式修改方式，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教
Vue body樣式修改
這篇文章記錄自己再寫項目是遇到的App.vue顯示問題。
問題：查看頁面時，發(fā)現(xiàn)有8px的margin,看著很不爽，想要去掉這個margin。
修改前：直接上圖
解決方式
通過beforeCreate函數(shù)設(shè)置App.vue中body的樣式
export default {
beforeCreate() {
document.querySelector('body').setAttribute('style', 'margin:0;')
},
}
可以明顯看出，外邊距已經(jīng)沒有了，over。
vue給body單獨設(shè)置樣式
在vue項目中，有時候會需要給單獨的頁面中的body設(shè)置樣式，下面是兩種方法
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>目前就知道這兩種，以后看到了再補(bǔ)充吧
總結(jié)
以上為個人經(jīng)驗，希望能給大家一個參考，也希望大家多多支持腳本之家。
相關(guān)文章
這篇文章主要為大家詳細(xì)介紹了vuex實現(xiàn)簡單的購物車功能，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價值，感興趣的小伙伴們可以參考一下2021-07-07
這篇文章主要為大家詳細(xì)介紹了Vue分頁組件的封裝方法，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價值，感興趣的小伙伴們可以參考一下2022-07-07
這篇文章主要介紹了Vue微信項目按需授權(quán)登錄策略實踐思路詳解,本文給大家介紹的非常詳細(xì)，具有一定的參考借鑒價值，需要的朋友可以參考下2018-05-05
這篇文章主要介紹了記錄一個van-list不斷onLoad加載的坑及解決方案，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-04-04
這篇文章主要介紹了Vue--Router動態(tài)路由的用法,很多時候，我們需要將給定匹配模式的路由映射到同一個組件，在?Vue?Router?中，我們可以在路徑中使用一個動態(tài)字段來實現(xiàn)，我們稱之為路徑參數(shù)，本文對Vue?Router動態(tài)路由相關(guān)知識給大家介紹的非常詳細(xì)，需要的朋友參考下吧2022-08-08
這篇文章主要介紹了vue使用一些外部插件及樣式的配置代碼,本文分步驟實例圖文相結(jié)合給大家介紹的非常詳細(xì)，具有一定的參考借鑒價值，需要的朋友可以參考下2019-11-11
這篇文章主要介紹了vue mounted組件的使用，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2018-06-06
這篇文章主要為大家介紹了vue3?typescript封裝axios過程示例詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪2022-10-10
這篇文章主要介紹了Vue中前端與后端如何實現(xiàn)交互，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-09-09
vue中v-for通過動態(tài)綁定class實現(xiàn)觸發(fā)效果
這篇文章主要介紹了vue中v-for通過動態(tài)綁定class實現(xiàn)觸發(fā)效果,本文通過實例代碼給大家介紹的非常詳細(xì)，具有一定的參考借鑒價值，需要的朋友可以參考下2018-12-12