代码如下,vue项目中,页面有一个class为c-ul的div,但是浏览器中style里没有我的c-li样式。这是为什么呢。研究一番之后发现:

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应用于全局,会影响其他页面相同类名的元素样式。(推荐指数1颗星)

2.style仍然scoped,把v-if条件渲染标签需要的样式加在行间style里,就一定会生效,但是如果样式设置太多,则代码不简洁美观。(推荐指数2.5颗星)

3.style仍然scoped,把v-if条件渲染标签单独拎出来进行判断,加一层div,不能用template不然也会失效、(这个最方便解决,推荐指数3颗星!!!)

  <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不同,需要你自己处理一下啦。(推荐指数2颗星)

Logo

前往低代码交流专区

更多推荐