vue項目頁面class不生效問題

代碼如下，vue項目中，頁面有一個class為c-ul的div,但是瀏覽器中style里沒有我的c-li樣式。這是為什么呢。

研究一番之后發(fā)現(xiàn)

1.我的style是scoped，也就是css樣式僅應用于我的這個名為component1的頁面。因此，在掛載的時候，頁面的所有元素都會被vue加上一個自定義屬性名：類似于這樣的<div data-v-5e57fb82="" class="wrapper"></div>

2.但是因為我的c-ul是條件渲染，因為List.length剛上來是0，所以這個元素不會被掛載在dom樹里，因此，就不具備scoped的自定義標簽在dom掛載的時候并不會掛載，

3.因此導致了，沒有對應的data-v-5e57fb82屬性，所以樣式不會生效。

<div class='wrapper'>
    <div v-if="List.length" class="c-ul">
        這是一個list列表
    </div>
</div>

<script>
export default {
  name: 'component1',
  data(){
    return{
      List:[]
    }
  },
</scropt>

<style scoped>
  .wrapper{
    background-color: #f4f4f4;
    height: 100vh;
    overflow-y:scroll;
    -webkit-overflow-scrolling:touch;
  }
  .c-ul{
    min-height: 100vh ;
  }
</style>

解決辦法

1.css style刪除scoped,應用于整個項目，那么即便if條件滿足之后，在dom中插入新的元素，沒有scoped的自定義屬性限制，c-ul就能夠生效了。但是這個方法會使這套css應用于全局，會影響其他頁面相同類名的元素樣式。（推薦指數(shù)1顆星）

2.style仍然scoped，把v-if條件渲染標簽需要的樣式加在行間style里，就一定會生效，但是如果樣式設置太多，則代碼不簡潔美觀。（推薦指數(shù)2.5顆星）

3.style仍然scoped，把v-if條件渲染標簽單獨拎出來進行判斷，加一層div，不能用template不然也會失效、（這個最方便解決，推薦指數(shù)3顆星?。。。?/p>

  <div v-if="List.length==0" 這里不加class='c-li',只用來v-if>
      <div class="c-li" >
        這里是list
      </div>
  </div>

4.style仍然scoped，但是不使用v-if來條件渲染，不然dom首次掛載中沒有這個標簽，導致樣式不生效，可以使用v-show,原理是，v-show的標簽一定會被掛載在dom中，只是display為none,那么既然他首次掛載在了DOM中，scoped給每個DOM元素加自定義屬性的時候，這個c-ul元素也會有這個標識，那么對應的c-ul樣式就會生效了~但是v-show的條件必須是true or false，語法上和v-if不同，需要你自己處理一下啦。（推薦指數(shù)2顆星）

v-html中@click和class不生效解決

vue v-html 中html標簽中@click 和 class 不生效問題解決方案

前端用v-html解析渲染html標簽能成功渲染，但click事件無法觸發(fā)（vue沒有將其作為vue的模板解析渲染）

點擊事件解決方案

將標簽中的@click  改為 onclick，

增加

created(){
?? ?window.test=this.test ;
},
methods: {
? ? //標簽中的點擊事件 ? ?
? ? test() {
? ? },
}

點擊事件就可以觸發(fā)了

class 樣式不生效解決方案

1.使用  >>>  穿透

2.定義一個新的style標簽，不含有scoped

總結

以上為個人經驗，希望能給大家一個參考，也希望大家多多支持腳本之家。

最新評論