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