如何產生

在開發項目中遇到在組件中添加樣式不生效的情況。具體場景如下

vue 組件

//我用js在上面div標簽中插入一個

text goes here

export default {

...

mounted(){

$('.box').html('

text goes here

')

},

...

}

//style ， vue組件scoped樣式都會在選擇器的最后加上data-v-***屬性

//樣式添加了scoped

.box{

color:red;

}

.text{

color:blue;

}

瀏覽器渲染的html 和 style 如下：

//html

text goes here

//style

.box[data-v-33f8ed40]{

color:red;

}

.text[data-v-33f8ed40]{ //樣式不生效，因為p標簽里沒有屬性data-v-33f8ed40

color:blue;

}

如何解決

很簡單將去掉 style 的 scoped 屬性。

以上就是本文的全部內容，希望對大家的學習有所幫助，也希望大家多多支持腳本之家。

總結

以上是生活随笔為你收集整理的vue修改html片段的样式无效,vue 组件中添加样式不生效的解决方法的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。