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