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-cli結(jié)合Element-ui基于cropper.js封裝vue實現(xiàn)圖片裁剪組件功能
這篇文章主要介紹了vue-cli結(jié)合Element-ui基于cropper.js封裝vue實現(xiàn)圖片裁剪組件功能,本文圖文并茂給大家介紹的非常詳細(xì)，需要的朋友可以參考下2018-03-03
這篇文章主要介紹了 vue3 自定義指令詳情，自定義指令分為全局和局部兩種類型，大家并不陌生。今天我們就講講在 vue3 中，自定義指令定義、使用以及鉤子函數(shù)都有哪些變化？,需要的朋友可以參考一下2021-11-11
這篇文章主要介紹了關(guān)于vue data中的this指向問題，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2023-07-07
axios 是一個基于 promise 的 HTTP 庫，可以用在瀏覽器和 node.js 中。首先需要知道：axios不是一種新的技術(shù)。axios 是一個基于Promise 用于瀏覽器和 nodejs 的 HTTP 客戶端，本質(zhì)上也是對原生XHR的封裝，只不過它是Promise的實現(xiàn)版本，符合最新的ES規(guī)范2022-09-09
Luckysheet?在vue中離線使用及引入報錯的解決方案(推薦)
這篇文章主要介紹了Luckysheet?在vue中離線使用方法及引入報錯的解決方案,將dist離線包在項目創(chuàng)建個文件夾放著，然后根據(jù)放置的位置在?index.html里面引入，下面通過案例給大家介紹我的項目里面放置的位置，需要的朋友可以參考下2022-10-10
在 Vue 3 中實現(xiàn)微信掃碼登錄,涉及到前端生成二維碼、監(jiān)聽微信回調(diào)以及與后端的交互,本文給大家介紹了一個詳細(xì)的實現(xiàn)步驟和代碼示例,對大家的學(xué)習(xí)或工作有一定的幫助,需要的朋友可以參考下2024-07-07
vue-element-admin后臺生成動態(tài)路由及菜單方法詳解
vue-element-admin后臺管理系統(tǒng)模板框架 是vue結(jié)合element-ui一體的管理系統(tǒng)框架,下面這篇文章主要給大家介紹了關(guān)于vue-element-admin后臺生成動態(tài)路由及菜單的相關(guān)資料,需要的朋友可以參考下2023-09-09
詳解Vue實戰(zhàn)指南之依賴注入(provide/inject)
這篇文章主要介紹了詳解Vue實戰(zhàn)指南之依賴注入(provide/inject)，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2018-11-11
vue實現(xiàn)播放后端flask發(fā)送的mp3文件
這篇文章主要為大家詳細(xì)介紹了vue如何實現(xiàn)播放后端flask發(fā)送的mp3文件,文中的示例代碼講解詳細(xì),感興趣的小伙伴可以跟隨小編一起學(xué)習(xí)一下2024-01-01
這篇文章主要是來和大家探討一下，Vue的響應(yīng)式系統(tǒng)僅僅是一個Proxy嗎，本文將圍繞此問題探索一下Proxy是如何實現(xiàn)Vue響應(yīng)式的，感興趣的小伙伴可以了解一下2023-08-08