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