vue 組件中添加樣式不生效的解決方法
更新時(shí)間：2018年07月06日 09:54:27 作者：小魚(yú)er
這篇文章主要介紹了vue 組件中添加樣式不生效的解決方法，小編覺(jué)得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧
如何產(chǎn)生
在開(kāi)發(fā)項(xiàng)目中遇到在組件中添加樣式不生效的情況。具體場(chǎng)景如下
//// vue 組件
<template>
<div class="box" data-v-33f8ed40></div>
<template>
//我用js在上面div標(biāo)簽中插入一個(gè)<p class='text'>text goes here</p>
<script>
export default {
...
mounted(){
$('.box').html('<p class="text">text goes here</p>')
},
...
}
</script>
//style ， vue組件scoped樣式都會(huì)在選擇器的最后加上data-v-***屬性
<style scoped>
//樣式添加了scoped
.box{
color:red;
}
.text{
color:blue;
}
</style>
瀏覽器渲染的html 和 style 如下：
//html
<div class="box" data-v-33f8ed40>
<p class='text'>text goes here</p>
</div>
//style
.box[data-v-33f8ed40]{
color:red;
}
.text[data-v-33f8ed40]{ //樣式不生效，因?yàn)閜標(biāo)簽里沒(méi)有屬性data-v-33f8ed40
color:blue;
}
如何解決
很簡(jiǎn)單將去掉 style 的 scoped 屬性。
以上就是本文的全部?jī)?nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。
相關(guān)文章
vue Draggable實(shí)現(xiàn)拖動(dòng)改變順序
這篇文章主要為大家詳細(xì)介紹了vue Draggable實(shí)現(xiàn)拖動(dòng)改變順序，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2022-04-04
VUEJS實(shí)戰(zhàn)之構(gòu)建基礎(chǔ)并渲染出列表（1）
這篇文章主要為大家詳細(xì)介紹了VUEJS實(shí)戰(zhàn)之構(gòu)建基礎(chǔ)并渲染出列表，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2016-06-06
vue使用element寫(xiě)東西讓我感覺(jué)到了特別的方便,下面這篇文章主要給大家介紹了關(guān)于如何利用Vue+Element做個(gè)小頁(yè)面的相關(guān)資料,文中通過(guò)示例代碼介紹的非常詳細(xì),需要的朋友可以參考下2022-03-03
本文主要介紹了在vue3中使用jsx的配置以及一些小問(wèn)題，文中通過(guò)示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2022-03-03
這篇文章主要介紹了Vue getter setter，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2019-04-04
這篇文章主要介紹了vue router 配置路由的方法，小編覺(jué)得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2021-10-10
詳解vue.js數(shù)據(jù)傳遞以及數(shù)據(jù)分發(fā)slot
本篇文章給大家通過(guò)代碼實(shí)例分析了vue.js數(shù)據(jù)傳遞以及數(shù)據(jù)分發(fā)slot的相關(guān)知識(shí)，有這方面興趣的朋友參考下吧。2018-01-01
關(guān)于vue項(xiàng)目vue-cli-service啟動(dòng)報(bào)錯(cuò)失敗問(wèn)題的解決方法
前端拉取代碼后,想要運(yùn)行代碼的時(shí)候可以能遇到啟動(dòng)報(bào)錯(cuò)的問(wèn)題,這里我們只針對(duì)于vue-cli-service報(bào)錯(cuò)項(xiàng)來(lái)說(shuō),文中通過(guò)圖文結(jié)合的方式給大家介紹的非常詳細(xì),具有一定的參考價(jià)值,需要的朋友可以參考下2024-08-08
這篇文章主要介紹了antd Form組件表單在vue3中的使用方式，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2023-04-04
在Vue.js應(yīng)用開(kāi)發(fā)中,Vue Router 提供了許多特性來(lái)簡(jiǎn)化前端路由管理和用戶體驗(yàn),其中一個(gè)重要的特性便是路由重定向和別名,它們可以幫助我們更好地管理和組織路由,本文將詳細(xì)介紹如何在Vue Router中使用路由重定向和別名,需要的朋友可以參考下2024-09-09