vue項(xiàng)目頁(yè)面class不生效問(wèn)題

代碼如下，vue項(xiàng)目中，頁(yè)面有一個(gè)class為c-ul的div,但是瀏覽器中style里沒(méi)有我的c-li樣式。這是為什么呢。

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

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

2.但是因?yàn)槲业腸-ul是條件渲染，因?yàn)長(zhǎng)ist.length剛上來(lái)是0，所以這個(gè)元素不會(huì)被掛載在dom樹(shù)里，因此，就不具備scoped的自定義標(biāo)簽在dom掛載的時(shí)候并不會(huì)掛載，

3.因此導(dǎo)致了，沒(méi)有對(duì)應(yīng)的data-v-5e57fb82屬性，所以樣式不會(huì)生效。

<div class='wrapper'>
    <div v-if="List.length" class="c-ul">
        這是一個(gè)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,應(yīng)用于整個(gè)項(xiàng)目，那么即便if條件滿足之后，在dom中插入新的元素，沒(méi)有scoped的自定義屬性限制，c-ul就能夠生效了。但是這個(gè)方法會(huì)使這套css應(yīng)用于全局，會(huì)影響其他頁(yè)面相同類名的元素樣式。（推薦指數(shù)1顆星）

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

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

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

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

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

vue v-html 中html標(biāo)簽中@click 和 class 不生效問(wèn)題解決方案

前端用v-html解析渲染html標(biāo)簽?zāi)艹晒︿秩荆玞lick事件無(wú)法觸發(fā)（vue沒(méi)有將其作為vue的模板解析渲染）

點(diǎn)擊事件解決方案

將標(biāo)簽中的@click  改為 onclick，

增加

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

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

class 樣式不生效解決方案

1.使用  >>>  穿透

2.定義一個(gè)新的style標(biāo)簽，不含有scoped

總結(jié)

以上為個(gè)人經(jīng)驗(yàn)，希望能給大家一個(gè)參考，也希望大家多多支持腳本之家。

最新評(píng)論