vue組件中的樣式屬性scoped實例詳解
Scoped CSS
Scoped CSS規(guī)范是Web組件產(chǎn)生不污染其他組件，也不被其他組件污染的CSS規(guī)范。
vue組件中的style標(biāo)簽標(biāo)有scoped屬性時表明style里的css樣式只適用于當(dāng)前組件元素
它是通過使用PostCSS來改變以下內(nèi)容實現(xiàn)的:
<style scoped>
.example {
color: red;
}
</style>
<template>
<div class="example">hi</div>
</template>
渲染結(jié)果：
<style>
.example[data-v-f3f3eg9] {
color: red;
}
</style>
<template>
<div class="example" data-v-f3f3eg9>hi</div>
</template>
混合使用全局屬性和局部屬性
<style> /* global styles */ </style> <style scoped> /* local styles */ </style>
關(guān)于子組件的根元素
使用了scoped屬性之后，父組件的style樣式將不會滲透到子組件中，然而子組件的根節(jié)點元素會同時被設(shè)置了scoped的父css樣式和設(shè)置了scoped的子css樣式影響，這么設(shè)計的目的是父組件可以對子組件根元素進行布局。
.vue模板中的樣式是根據(jù)需要按需加載，訪問一個頁面該組件中的樣式就會追加到head標(biāo)簽中，如果父子組件中都對某個子組件根節(jié)點元素進行了控制，則父組件里的樣式會被后來的覆蓋。
深選擇器
如果想對設(shè)置了scoped的子組件里的元素進行控制可以使用'>>>'或者'deep'
<template>
<div id="app">
<gHeader></gHeader>
</div>
</template>
<style lang="css" scoped>
.gHeader /deep/ .name{ //第一種寫法
color:red;
}
.gHeader >>> .name{ //二種寫法
color:red;
}
</style>
<div class="gHeader">
<div class="name"></div>
</div>
一些預(yù)處理程序例如sass不能解析>>>屬性，這種情況下可以用deep，它是>>>的別名，工作原理相同。
動態(tài)生成的內(nèi)容
使用v-html動態(tài)創(chuàng)建的DOM內(nèi)容，不受設(shè)置scoped的樣式影響，但你依然可以使用深選擇器進行控制
下面給大家補充下vue中使用v-html加載的富文本，css中定義樣式不生效
如題，使用v-html加載一段富文本，富文本里包含圖片，在手機上圖片寬度可能會溢出
<div v-html="htmlContent" class="rich"></div>
<style scope>
.rich>>> img{ display:block; max-width: 100%}
</style>
注意：這里的>>>需要使用css語法，寫在less里會報錯
總結(jié)
以上所述是小編給大家介紹的vue組件中的樣式屬性scoped實例詳解，希望對大家有所幫助，如果大家有任何疑問請給我留言，小編會及時回復(fù)大家的。在此也非常感謝大家對腳本之家網(wǎng)站的支持！
相關(guān)文章
在vue中v-for循環(huán)遍歷圖片不顯示錯誤的解決方案
這篇文章主要介紹了在vue中v-for循環(huán)遍歷圖片不顯示錯誤的解決方案，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-01-01
這篇文章主要介紹了vue父子組件的數(shù)據(jù)傳遞示例,小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2017-03-03
這篇文章主要介紹了vue中的搜索關(guān)鍵字實例講解，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-04-04
最近在使用系統(tǒng)的過程中，業(yè)務(wù)人員反饋剛登錄一會就提示token過期需要重新登錄，所以本文為大家分享一個無感刷新的實現(xiàn)代碼，需要的可以參考下2023-07-07
這篇文章主要介紹了vue之Vue.use的使用場景，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-12-12
詳解vue-cli腳手架build目錄中的dev-server.js配置文件
這篇文章主要介紹了詳解vue-cli腳手架build目錄中的dev-server.js配置文件，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2017-11-11
vue-autoui自匹配webapi的UI控件的實現(xiàn)
這篇文章主要介紹了vue-autoui自匹配webapi的UI控件的實現(xiàn)，文中通過示例代碼介紹的非常詳細，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2020-03-03
vuex頁面刷新導(dǎo)致數(shù)據(jù)丟失的解決方案
這篇文章主要介紹了vuex頁面刷新導(dǎo)致數(shù)據(jù)丟失的解決方案，幫助大家更好的使用vue框架，感興趣的朋友可以了解下2020-12-12
本篇文章給大家分享了vue2單元測試環(huán)境搭建的詳細步驟，對此有需要的朋友參考學(xué)習(xí)下。2018-05-05
滑塊驗證是比較常見的人機鑒別的方法，本文主要介紹了Vue集成阿里云做滑塊驗證，具有一定的參考價值，感興趣的可以了解一下2022-01-01