vue組件添加樣式不生效怎么解決

本文小編為大家詳細(xì)介紹“vue組件添加樣式不生效怎么解決”，內(nèi)容詳細(xì)，步驟清晰，細(xì)節(jié)處理妥當(dāng)，希望這篇“vue組件添加樣式不生效怎么解決”文章能幫助大家解決疑惑，下面跟著小編的思路慢慢深入，一起來(lái)學(xué)習(xí)新知識(shí)吧。

具體場(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;
}

vue是什么

Vue是一套用于構(gòu)建用戶界面的漸進(jìn)式JavaScript框架，Vue與其它大型框架的區(qū)別是，使用Vue可以自底向上逐層應(yīng)用，其核心庫(kù)只關(guān)注視圖層，方便與第三方庫(kù)和項(xiàng)目整合，且使用Vue可以采用單文件組件和Vue生態(tài)系統(tǒng)支持的庫(kù)開(kāi)發(fā)復(fù)雜的單頁(yè)應(yīng)用。

讀到這里，這篇“vue組件添加樣式不生效怎么解決”文章已經(jīng)介紹完畢，想要掌握這篇文章的知識(shí)點(diǎn)還需要大家自己動(dòng)手實(shí)踐使用過(guò)才能領(lǐng)會(huì)，如果想了解更多相關(guān)內(nèi)容的文章，歡迎關(guān)注億速云行業(yè)資訊頻道。